跳至内容链接组件

<div class="bg-stone-50 dark:bg-stone-900 min-h-screen flex items-start justify-center p-4 sm:p-6 lg:p-8 relative font-sans">

  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:rounded-md focus:bg-amber-700/90 focus:text-stone-50 focus:ring-2 focus:ring-amber-500 focus:outline-none transition-all duration-300 ease-in-out dark:focus:bg-amber-800/90 dark:focus:text-stone-100">
    Skip to main content
  </a>

  <div class="w-full max-w-4xl bg-white dark:bg-stone-800 rounded-lg shadow-xl p-6 sm:p-8 lg:p-10 text-stone-800 dark:text-stone-200 ring-1 ring-stone-200 dark:ring-stone-700">
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-amber-800 dark:text-amber-500 mb-6 sm:mb-8 text-center">
      Your Travel Destination
    </h1>
    <p class="text-lg leading-relaxed mb-8 text-center text-stone-600 dark:text-stone-300">
      Explore breathtaking landscapes and vibrant cultures. Start your adventure now!
    </p>

    <img src="https://picsum.photos/seed/travel/800/450" alt="Scenic travel destination" class="w-full h-auto rounded-lg shadow-md mb-8 object-cover">

    <section id="main-content" tabindex="-1" class="outline-none focus:ring-2 focus:ring-amber-500 focus:rounded-md focus:p-2 -m-2">
      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-amber-700 dark:text-amber-400">Discover Serenity</h2>
      <p class="mb-6 text-stone-700 dark:text-stone-300">
        Nestled amidst ancient hills and whispering rivers, this destination offers an unparalleled escape from the mundane. Immerse yourself in the rich tapestry of local traditions, savor exquisite cuisine, and embark on thrilling excursions.
      </p>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div class="bg-stone-100 dark:bg-stone-700 p-4 rounded-md shadow-sm">
          <h3 class="font-semibold text-lg mb-2 text-amber-800 dark:text-amber-400">Activities</h3>
          <ul class="list-disc list-inside text-stone-700 dark:text-stone-300">
            <li>Guided hiking tours</li>
            <li>Cultural workshops</li>
            <li>River cruises</li>
            <li>Local market visits</li>
          </ul>
        </div>
        <div class="bg-stone-100 dark:bg-stone-700 p-4 rounded-md shadow-sm">
          <h3 class="font-semibold text-lg mb-2 text-amber-800 dark:text-amber-400">Accommodation</h3>
          <p class="text-stone-700 dark:text-stone-300">
            From cozy eco-lodges to luxurious resorts, find your perfect stay. All options blend seamlessly with the natural beauty.
          </p>
        </div>
      </div>
      <p class="text-base text-stone-600 dark:text-stone-400">
        Plan your dream vacation today and create memories that will last a lifetime.
      </p>
    </section>
  </div>
</div>