3D_Muted_Gallery_Component

<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 text-gray-800 dark:text-gray-100 leading-tight tracking-tight drop-shadow-lg">
      <span class="block">Explore Our Depth Gallery</span>
      <span class="block text-2xl sm:text-3xl font-medium text-gray-500 dark:text-gray-400 mt-2">Showcasing Stories Through Immersive Visuals</span>
    </h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Gallery Item 1 -->
      <div class="relative group perspective-1000">
        <div class="relative transform-style-preserve-3d transition-transform duration-700 ease-in-out hover:rotate-y-10 hover:shadow-2xl dark:hover:shadow-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl dark:shadow-gray-950/70 block">
          <div class="relative z-10 p-5 backface-hidden">
            <img src="https://picsum.photos/id/1018/600/400" alt="Forest Stream" class="w-full h-48 object-cover rounded-md mb-4 shadow dark:shadow-gray-700/30 group-hover:scale-105 transition-transform duration-300">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">The Whispering Woods</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A journey into the heart of an ancient forest, where tranquility reigns and secrets are whispered by the wind.</p>
            <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-7 h-7 rounded-full mr-2 shadow-sm">
              <span>JohnDoe / Oct 26, 2023</span>
            </div>
          </div>
          <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/30 to-purple-500/30 dark:from-indigo-800/30 dark:to-purple-800/30 rounded-xl backface-hidden rotate-y-180 flex items-center justify-center p-6 text-gray-800 dark:text-gray-200 text-center text-sm font-medium leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
            <p>"Nature's beauty reflects the soul's serenity. This captures the essence of a quiet, reflective escape."</p>
          </div>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="relative group perspective-1000">
        <div class="relative transform-style-preserve-3d transition-transform duration-700 ease-in-out hover:rotate-y-10 hover:shadow-2xl dark:hover:shadow-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl dark:shadow-gray-950/70 block">
          <div class="relative z-10 p-5 backface-hidden">
            <img src="https://picsum.photos/id/1040/600/400" alt="Abstract Cityscape" class="w-full h-48 object-cover rounded-md mb-4 shadow dark:shadow-gray-700/30 group-hover:scale-105 transition-transform duration-300">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Urban Echoes</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Discovering the silent stories woven into the bustling fabric of the concrete jungle, where past meets future.</p>
            <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-7 h-7 rounded-full mr-2 shadow-sm">
              <span>JaneDoe / Nov 01, 2023</span>
            </div>
          </div>
          <div class="absolute inset-0 bg-gradient-to-br from-blue-500/30 to-cyan-500/30 dark:from-blue-800/30 dark:to-cyan-800/30 rounded-xl backface-hidden rotate-y-180 flex items-center justify-center p-6 text-gray-800 dark:text-gray-200 text-center text-sm font-medium leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
            <p>"The city breathes. Every shadow and light tells a tale of human endeavor, captured in this mesmerizing view."</p>
          </div>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="relative group perspective-1000">
        <div class="relative transform-style-preserve-3d transition-transform duration-700 ease-in-out hover:rotate-y-10 hover:shadow-2xl dark:hover:shadow-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl dark:shadow-gray-950/70 block">
          <div class="relative z-10 p-5 backface-hidden">
            <img src="https://picsum.photos/id/1025/600/400" alt="Snowy Mountain" class="w-full h-48 object-cover rounded-md mb-4 shadow dark:shadow-gray-700/30 group-hover:scale-105 transition-transform duration-300">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Summit's Silence</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Ascending to the peaks, where the air is thin and the silence speaks volumes of nature's grandeur.</p>
            <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
              <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar" class="w-7 h-7 rounded-full mr-2 shadow-sm">
              <span>WillSmith / Oct 19, 2023</span>
            </div>
          </div>
          <div class="absolute inset-0 bg-gradient-to-br from-gray-500/30 to-slate-500/30 dark:from-gray-800/30 dark:to-slate-800/30 rounded-xl backface-hidden rotate-y-180 flex items-center justify-center p-6 text-gray-800 dark:text-gray-200 text-center text-sm font-medium leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
            <p>"Majesty unleashed. The mountains stand as eternal guardians of time, inspiring awe and humility."</p>
          </div>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="relative group perspective-1000">
        <div class="relative transform-style-preserve-3d transition-transform duration-700 ease-in-out hover:rotate-y-10 hover:shadow-2xl dark:hover:shadow-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl dark:shadow-gray-950/70 block">
          <div class="relative z-10 p-5 backface-hidden">
            <img src="https://picsum.photos/id/1084/600/400" alt="Rainy City Street" class="w-full h-48 object-cover rounded-md mb-4 shadow dark:shadow-gray-700/30 group-hover:scale-105 transition-transform duration-300">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Reflective Puddles</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">The rain-soaked streets mirror the sky, creating a calming, introspective view of urban life.</p>
            <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
              <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Author Avatar" class="w-7 h-7 rounded-full mr-2 shadow-sm">
              <span>EmilyClark / Nov 05, 2023</span>
            </div>
          </div>
          <div class="absolute inset-0 bg-gradient-to-br from-green-500/30 to-lime-500/30 dark:from-teal-800/30 dark:to-green-800/30 rounded-xl backface-hidden rotate-y-180 flex items-center justify-center p-6 text-gray-800 dark:text-gray-200 text-center text-sm font-medium leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
            <p>"Even in the downpour, there is beauty. The world reflects itself, showing depth in every drop."</p>
          </div>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="relative group perspective-1000">
        <div class="relative transform-style-preserve-3d transition-transform duration-700 ease-in-out hover:rotate-y-10 hover:shadow-2xl dark:hover:shadow-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl dark:shadow-gray-950/70 block">
          <div class="relative z-10 p-5 backface-hidden">
            <img src="https://picsum.photos/id/105/600/400" alt="Desert Landscape" class="w-full h-48 object-cover rounded-md mb-4 shadow dark:shadow-gray-700/30 group-hover:scale-105 transition-transform duration-300">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Sands of Time</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">The vast, ancient desert whispers tales of endurance and the timeless beauty of arid landscapes.</p>
            <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
              <img src="https://randomuser.me/api/portraits/women/76.jpg" alt="Author Avatar" class="w-7 h-7 rounded-full mr-2 shadow-sm">
              <span>SarahLee / Oct 29, 2023</span>
            </div>
          </div>
          <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/30 to-orange-500/30 dark:from-yellow-800/30 dark:to-orange-800/30 rounded-xl backface-hidden rotate-y-180 flex items-center justify-center p-6 text-gray-800 dark:text-gray-200 text-center text-sm font-medium leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
            <p>"Endless skies meet ancient Earth. The desert's story is one of unwavering spirit and profound peace."</p>
          </div>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="relative group perspective-1000">
        <div class="relative transform-style-preserve-3d transition-transform duration-700 ease-in-out hover:rotate-y-10 hover:shadow-2xl dark:hover:shadow-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl dark:shadow-gray-950/70 block">
          <div class="relative z-10 p-5 backface-hidden">
            <img src="https://picsum.photos/id/1069/600/400" alt="Northern Lights" class="w-full h-48 object-cover rounded-md mb-4 shadow dark:shadow-gray-700/30 group-hover:scale-105 transition-transform duration-300">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Aurora Dreams</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Witness the celestial dance of pure light across the polar skies, a truly ethereal experience.</p>
            <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
              <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Author Avatar" class="w-7 h-7 rounded-full mr-2 shadow-sm">
              <span>MichaelB / Nov 08, 2023</span>
            </div>
          </div>
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500/30 to-pink-500/30 dark:from-purple-800/30 dark:to-pink-800/30 rounded-xl backface-hidden rotate-y-180 flex items-center justify-center p-6 text-gray-800 dark:text-gray-200 text-center text-sm font-medium leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
            <p>"Where colors dance and silence reigns. The sky becomes a canvas, painting dreams across the vast dark."</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Essential for 3D transforms to work correctly */
  .perspective-1000 {
    perspective: 1000px;
  }

  .transform-style-preserve-3d {
    transform-style: preserve-3d;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  .rotate-y-180 {
    transform: rotateY(180deg);
  }
</style>