Application Skip Links Multiple skip links with dark background

<nav
      class="absolute top-0 left-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-full rounded-sm bg-gray-100 p-4 transition-transform focus-within:translate-y-4"
      aria-label="Skip to"
    >
      <p class="text-xs font-semibold tracking-wide text-gray-700 uppercase">Skip to:</p>

      <div class="mt-1 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>