Image Lightbox 组件

<div class="relative w-full h-full bg-gradient-to-br from-gray-800 to-black p-8 md:p-12 font-sans overflow-hidden">

  <!-- Skeuomorphism background texture -->
  <div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('https://grainy-gradients.vercel.app/gradients/png/new-42.png');"></div>

  <!-- Lightbox Container -->
  <div class="relative z-10 max-w-6xl mx-auto bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_20px_50px_rgba(0,0,0,0.5),0_0_0_1px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_20px_50px_rgba(0,0,0,0.8),0_0_0_1px_rgba(0,0,0,0.3)] p-6 md:p-10 border border-gray-300 dark:border-gray-600">

    <!-- Header -->
    <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-300 dark:border-gray-600">
      <h1 class="text-4xl md:text-5xl font-extrabold text-indigo-700 dark:text-indigo-400 drop-shadow-lg [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
        Gallery Showcase
      </h1>
      <div class="flex space-x-3">
        <button class="w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 transition-all duration-300 transform hover:scale-105 shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.6)] flex items-center justify-center text-white text-xl font-bold">
          <span class="sr-only">Close</span> &times;
        </button>
        <button class="w-10 h-10 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-all duration-300 transform hover:scale-105 shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.6)] flex items-center justify-center text-white text-xl font-bold">
          <span class="sr-only">Minimize</span> &#8211;
        </button>
        <button class="w-10 h-10 rounded-full bg-green-500 hover:bg-green-600 transition-all duration-300 transform hover:scale-105 shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.6)] flex items-center justify-center text-white text-xl font-bold">
          <span class="sr-only">Maximize</span> &#x25A1;
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Image Preview Section -->
      <div class="relative bg-gray-100 dark:bg-gray-800 rounded-2xl p-4 shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_5px_15px_rgba(0,0,0,0.2)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_15px_rgba(0,0,0,0.5)] border border-gray-300 dark:border-gray-700">
        <img src="https://picsum.photos/id/1018/800/600" alt="Featured Image" class="w-full h-auto rounded-xl object-cover shadow-lg border-4 border-gray-200 dark:border-gray-700 transition-all duration-500 hover:scale-[1.02] cursor-pointer" />
        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-30 rounded-2xl pointer-events-none"></div>

        <!-- Navigation Buttons -->
        <div class="absolute top-1/2 left-0 right-0 flex justify-between px-4 transform -translate-y-1/2">
          <button class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-white text-3xl flex items-center justify-center shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_10px_rgba(0,0,0,0.5)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_10px_rgba(0,0,0,0.8)] border border-indigo-400 dark:border-violet-700 transition-all duration-300 hover:scale-105 active:scale-95">
            &#8592;
          </button>
          <button class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-white text-3xl flex items-center justify-center shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_10px_rgba(0,0,0,0.5)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_10px_rgba(0,0,0,0.8)] border border-indigo-400 dark:border-violet-700 transition-all duration-300 hover:scale-105 active:scale-95">
            &#8594;
          </button>
        </div>
      </div>

      <!-- Details and Thumbnails Section -->
      <div class="flex flex-col space-y-6">

        <!-- Image Title & Description -->
        <div class="bg-gradient-to-br from-white to-gray-200 dark:from-gray-800 dark:to-gray-900 p-6 rounded-2xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_5px_15px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_15px_rgba(0,0,0,0.4)] border border-gray-300 dark:border-gray-700">
          <h2 class="text-3xl font-bold text-teal-600 dark:text-teal-400 mb-3 drop-shadow [text-shadow:_0_1px_0_rgb(0_0_0_/_30%)]">Forest Pathway</h2>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">A serene pathway winding through a dense, vibrant forest, bathed in dappled sunlight. Perfect for a peaceful stroll or deep contemplation.</p>

          <!-- Author Info -->
          <div class="flex items-center mt-5 pt-4 border-t border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-indigo-500 dark:border-purple-400 shadow-md" />
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">By John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Published on Oct 26, 2023</p>
            </div>
          </div>
        </div>

        <!-- Thumbnails Grid -->
        <div class="p-4 bg-gradient-to-br from-indigo-500 to-violet-600 rounded-2xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_15px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_15px_rgba(0,0,0,0.7)] border border-indigo-400 dark:border-violet-700">
          <h3 class="text-2xl font-bold text-white mb-4 [text-shadow:_0_2px_0_rgb(0_0_0_/_30%)]">More from this collection:</h3>
          <div class="grid grid-cols-3 gap-4">
            <img src="https://picsum.photos/id/1003/150/150" alt="Thumbnail 1" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1015/150/150" alt="Thumbnail 2" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1016/150/150" alt="Thumbnail 3" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1019/150/150" alt="Thumbnail 4" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1024/150/150" alt="Thumbnail 5" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1025/150/150" alt="Thumbnail 6" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
          </div>
        </div>
      </div>
    </div>

    <!-- Call to Action / Footer -->
    <div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-center">
      <a href="#" class="inline-block px-8 py-3 bg-teal-500 hover:bg-teal-600 text-white font-bold rounded-xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_10px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_10px_rgba(0,0,0,0.7)] transition-all duration-300 transform hover:scale-105 tracking-wide text-lg text-center">
        Download High-Res
      </a>
      <p class="text-gray-600 dark:text-gray-400 text-sm mt-4 sm:mt-0">© 2023 Skew Photo Gallery. All rights reserved.</p>
    </div>

  </div>
</div>