Application Skip Links Skip links with title and light background

<nav
      class="absolute inset-x-0 top-0 flex -translate-y-full items-center gap-3 rounded-sm bg-gray-100 p-4 transition-transform focus-within:translate-y-0"
      aria-label="Skip to"
    >
      <p class="text-xs font-semibold tracking-wide text-gray-700 uppercase">Skip to:</p>

      <div class="flex flex-wrap gap-2">
        <a
          href="#mainNavigation"
          class="text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600"
        >
          Navigation
        </a>

        <a
          href="#mainContent"
          class="text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600"
        >
          Content
        </a>

        <a
          href="#mainFooter"
          class="text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600"
        >
          Footer
        </a>
      </div>
    </nav>