Search Components

Gallery

Component for displaying multiple images

Playful Weather Gallery Component

A responsive and playful gallery component for weather or climate data, featuring rounded elements, muted colors, and dark mode support. Displays weather-related images with descriptions.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-blue-600 dark:text-blue-400 mb-4 sm:mb-6 lg:mb-8 text-center drop-shadow-lg">
      Climate Chronicles
    </h2>
    <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 sm:mb-10 text-center max-w-3xl mx-auto">
      Explore fascinating moments and phenomena from our planet's diverse weather patterns.
    </p>

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

      <!-- Gallery Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-blue-500/50 group">
        <img src="https://picsum.photos/id/1043/600/400" alt="Sunny Day" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Golden Hour Sunshine</h3>
          <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">A perfect end to a warm summer day, with clear skies and a gentle breeze.</p>
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 9a1 1 0 011-1h1a1 1 0 110 2H6a1 1 0 01-1-1zm5-1a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1zm4 1a1 1 0 011 1v1a1 1 0 11-2 0V9a1 1 0 011-1z"></path></svg>
            <span>Temperature: 28°C</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-emerald-500/50 group">
        <img src="https://picsum.photos/id/1025/600/400" alt="Rainy Day" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Tranquil Downpour</h3>
          <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">Gently falling rain brings life to the parched earth, a soothing natural symphony.</p>
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.727 6.42a1 1 0 00-.707-.293H15.5l.454-1.362A1 1 0 0015 4H5a1 1 0 00-.954 1.362L4.5 6.127H2.98a1 1 0 00-.707.293 1 1 0 00-.293.707v7.506a1 1 0 00.293.707 1 1 0 00.707.293h14.04a1 1 0 00.707-.293 1 1 0 00.293-.707V7.127a1 1 0 00-.293-.707zM15 14H5V6h10v8z" clip-rule="evenodd"></path></svg>
            <span>Humidity: 90%</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-purple-500/50 group">
        <img src="https://picsum.photos/id/1018/600/400" alt="Cloudy Sky" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Whispering Clouds</h3>
          <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">A canvas of soft clouds stretches across the sky, promising a calm day.</p>
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M14 10a4 4 0 11-8 0 4 4 0 018 0z"></path><path fill-rule="evenodd" d="M7.002 9.043l-1.42 1.42a1 1 0 01-1.414 0l-1.42-1.42a1 1 0 010-1.414l1.42-1.42a1 1 0 011.414 0l1.42 1.42a1 1 0 010 1.414zM12.998 9.043l1.42-1.42a1 1 0 011.414 0l1.42 1.42a1 1 0 010 1.414l-1.42 1.42a1 1 0 01-1.414 0l-1.42-1.42a1 1 0 010-1.414zM10 3a1 1 0 00-1 1v1a1 1 0 102 0V4a1 1 0 00-1-1zM10 15a1 1 0 00-1 1v1a1 1 0 102 0v-1a1 1 0 00-1-1zM4 10a1 1 0 01-1 1H2a1 1 0 110-2h1a1 1 0 011 1zm15 0a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1z"></path></svg>
            <span>Cloud Cover: 75%</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-rose-500/50 group">
        <img src="https://picsum.photos/id/1019/600/400" alt="Foggy Morning" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Mystic Morning Mist</h3>
          <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">The world awakens cloaked in a serene veil of morning fog.</p>
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 text-indigo-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M7 6a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zM7 14a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
            <span>Visibility: Low</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-sky-500/50 group">
        <img src="https://picsum.photos/id/1/600/400" alt="Clear Sky with Mountains" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Mountain Breezes</h3>
          <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">Crisp air and panoramic views under an endless clear blue sky.</p>
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M6.293 6.707a1 1 0 010-1.414L9 2.586V13a1 1 0 11-2 0V6.586L4.707 9.293a1 1 0 11-1.414-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 6.586V13a1 1 0 11-2 0V6.586L6.293 6.707z" clip-rule="evenodd"></path></svg>
            <span>Wind Speed: 15 km/h</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-pink-500/50 group">
        <img src="https://picsum.photos/id/1084/600/400" alt="Sunset" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Vivid Sunset Hues</h3>
          <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">The sky ablaze with colors as the sun dips below the horizon.</p>
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
            <svg class="w-5 h-5 mr-2 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2H4zm3 3a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V6a1 1 0 00-1-1H7z" clip-rule="evenodd"></path></svg>
            <span>UV Index: Low</span>
          </div>
        </div>
      </div>

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

Luxury Gallery Component

An elegant and sophisticated gallery component designed for music and audio platforms, featuring warm neutrals, responsive layouts, and dark mode support.

Open Preview

                <div class="bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 min-h-screen font-serif py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-stone-900 dark:text-stone-50 mb-4 selection:bg-stone-300 dark:selection:bg-stone-700">
        Featured Albums & Artists
      </h2>
      <p class="mt-4 text-xl text-stone-600 dark:text-stone-300 font-light max-w-2xl mx-auto selection:bg-stone-300 dark:selection:bg-stone-700">
        Discover exquisite sounds and immerse yourself in a curated collection of premium audio experiences.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
      <!-- Gallery Item 1 -->
      <div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1043/400/300" alt="Album Cover 1">
        <div class="p-6">
          <h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">The Serenity Sessions</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">A calming journey through ambient soundscapes and melodic textures, perfect for relaxation.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar">
              <span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Elysia Croft</span>
            </div>
            <button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
              Listen
            </button>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/111/400/300" alt="Album Cover 2">
        <div class="p-6">
          <h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Urban Pulse Beat</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Feel the rhythm of the city with a vibrant mix of electronic and hip-hop beats.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Artist Avatar">
              <span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">DJ Synapse</span>
            </div>
            <button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
              Listen
            </button>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1069/400/300" alt="Album Cover 3">
        <div class="p-6">
          <h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Timeless Melodies</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Classic instrumental pieces reimagined for the modern audiophile, a true auditory delight.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/67.jpg" alt="Artist Avatar">
              <span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Maestro Orion</span>
            </div>
            <button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
              Listen
            </button>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1051/400/300" alt="Album Cover 4">
        <div class="p-6">
          <h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Jazzy Nights</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Smooth saxophone solos and soulful piano melodies for the perfect evening ambiance.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Artist Avatar">
              <span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Luna Serenade</span>
            </div>
            <button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
              Listen
            </button>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1025/400/300" alt="Album Cover 5">
        <div class="p-6">
          <h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Echoes of the Forest</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Nature-inspired soundscapes blending organic instruments and environmental recordings.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Artist Avatar">
              <span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Forest Whisperer</span>
            </div>
            <button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
              Listen
            </button>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1084/400/300" alt="Album Cover 6">
        <div class="p-6">
          <h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Acoustic Reverie</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Unplugged sessions delivering raw emotion and pure, unadulterated musicality.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/women/76.jpg" alt="Artist Avatar">
              <span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Willow Creek Band</span>
            </div>
            <button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
              Listen
            </button>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

Minimalist Sepia Image Gallery for Reservations

A minimalist and flat design image gallery component with warm sepia/brown tones, suitable for booking and reservation systems. It features responsive design and dark mode support.

Open Preview

                <div class="bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-center mb-4 sm:mb-6 leading-tight">
      Our Spaces
    </h2>
    <p class="text-center text-lg text-stone-600 dark:text-stone-400 mb-8 sm:mb-12 max-w-2xl mx-auto">
      Explore our elegantly designed spaces, perfect for your next reservation.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Gallery Item 1 -->
      <div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
        <img src="https://picsum.photos/id/404/600/400" alt="Spacious Lounge Area" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
        <div class="p-4 bg-stone-100 dark:bg-stone-800">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Heritage Room</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-4">Ideal for intimate gatherings and private consultations.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
            View Details
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
        <img src="https://picsum.photos/id/292/600/400" alt="Modern Meeting Room" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
        <div class="p-4 bg-stone-100 dark:bg-stone-800">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Loft Studio</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-4">A bright, airy space ideal for creative workshops.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
            View Details
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
        <img src="https://picsum.photos/id/312/600/400" alt="Cozy Corner Cafe" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
        <div class="p-4 bg-stone-100 dark:bg-stone-800">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Quiet Nook</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-4">Perfect for focused work or small, confidential meetings.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
            View Details
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
        <img src="https://picsum.photos/id/296/600/400" alt="Elegant Dining Area" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
        <div class="p-4 bg-stone-100 dark:bg-stone-800">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Grand Salon</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-4">A versatile space for larger functions and events.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
            View Details
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
        <img src="https://picsum.photos/id/300/600/400" alt="Spacious Office Setup" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
        <div class="p-4 bg-stone-100 dark:bg-stone-800">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Executive Suite</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-4">A premium setting for corporate meetings and presentations.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
            View Details
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
        <img src="https://picsum.photos/id/350/600/400" alt="Outdoor Patio Area" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
        <div class="p-4 bg-stone-100 dark:bg-stone-800">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Garden Terrace</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-4">An inviting outdoor setting for relaxed gatherings.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
            View Details
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

A simple, responsive image gallery component designed for business/corporate websites, featuring a triadic color scheme inspired by Material Design principles. It includes a dark theme for user preference and uses a grid-based layout.

Open Preview

                <div class="bg-blue-50 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-200 mb-8">Our Work</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-2">Project Alpha</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Alpha, highlighting its key features and success.</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-red-700 dark:text-red-300 mb-2">Project Beta</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Beta, highlighting its key features and success.</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-green-700 dark:text-green-300 mb-2">Project Gamma</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Gamma, highlighting its key features and success.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Gallery Component

A responsive gallery component with Glassmorphism design, analogous color scheme, complex layout, and dark theme support for e-commerce.

Open Preview

                <div class="bg-gradient-to-br from-purple-100 via-purple-200 to-pink-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 min-h-screen p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center text-purple-800 dark:text-purple-300 mb-12 drop-shadow-lg">Product Gallery</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Product Card 1 -->
      <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 group relative">
        <div class="p-6 relative z-10">
          <img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-lg mb-4 shadow-md group-hover:shadow-xl transition-shadow duration-300">
          <h2 class="text-2xl font-semibold text-purple-900 dark:text-purple-200 mb-2">Product Title 1</h2>
          <p class="text-purple-800 dark:text-purple-300 text-lg mb-4">A short description of the product, highlighting its key features.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-bold text-purple-900 dark:text-purple-100">$99.99</span>
            <span class="text-sm text-purple-700 dark:text-purple-300 line-through">$120.00</span>
          </div>
          <div class="flex space-x-2 text-purple-700 dark:text-purple-300 mb-4">
            <span class="text-yellow-400">★</span>
            <span class="text-yellow-400">★</span>
            <span class="text-yellow-400">★</span>
            <span class="text-yellow-400">★</span>
            <span class="text-gray-400">★</span>
            <span>(4.5 stars)</span>
          </div>
          <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">Add to Cart</button>
        </div>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 z-0"></div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 group relative">
        <div class="p-6 relative z-10">
          <img src="https://picsum.photos/id/238/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-lg mb-4 shadow-md group-hover:shadow-xl transition-shadow duration-300">
          <h2 class="text-2xl font-semibold text-purple-900 dark:text-purple-200 mb-2">Product Title 2</h2>
          <p class="text-purple-800 dark:text-purple-300 text-lg mb-4">Another great product with amazing features and benefits you\

Gallery Component

A retro/vintage-inspired gallery component with a vibrant color scheme, moderate complexity, and responsive design with dark theme support. Designed for content consumption.

Open Preview

                <div class="container mx-auto p-4 font-sans">

  <!-- Retro/Vintage Header -->
  <header class="text-center mb-8">
    <h1 class="text-5xl font-extrabold text-blue-700 dark:text-blue-300 mb-2 uppercase tracking-wide">The VINTAGE Gallery</h1>
    <p class="text-xl text-yellow-600 dark:text-yellow-400">A Glimpse into the Past, Vibrant as Ever</p>
  </header>

  <!-- Gallery Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Gallery Item 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-yellow-500 dark:border-yellow-600">
      <img src="https://picsum.photos/seed/vintage1/400/300" alt="Vintage Camera" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Classic Capture</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

    <!-- Gallery Item 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-purple-500 dark:border-purple-600">
      <img src="https://picsum.photos/seed/retro2/400/300" alt="Retro Car" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Ride in Style</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

    <!-- Gallery Item 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-green-500 dark:border-green-600">
      <img src="https://picsum.photos/seed/vintage3/400/300" alt="Old Radio" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Broadcast Blasts</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

    <!-- Gallery Item 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-red-500 dark:border-red-600">
      <img src="https://picsum.photos/seed/retro4/400/300" alt="Vinyl Record" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Spinning Tunes</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

  </div>

  <!-- About Section (Moderate Complexity) -->
  <section class="mt-12 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-4 border-blue-500 dark:border-blue-600">
    <h2 class="text-4xl font-bold text-blue-700 dark:text-blue-300 mb-6 text-center">About Our Collection</h2>
    <div class="flex flex-col md:flex-row items-center justify-center space-y-6 md:space-y-0 md:space-x-8">
      <div class="md:w-1/2">
        <p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed mb-4">
          Step back in time with our curated collection of vintage and retro-inspired imagery. Each piece is selected to evoke nostalgia and a sense of timeless charm. We believe in vibrant storytelling through visual experiences.
        </p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Curator Avatar" class="w-16 h-16 rounded-full border-4 border-yellow-500">
          <div>
            <p class="font-bold text-red-600 dark:text-red-400">Jane Doe</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Chief Curator</p>
          </div>
        </div>
      </div>
      <div class="md:w-1/2">
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Authentic Retro Aesthetics</li>
          <li>High-Quality Digital Renders</li>
          <li>Optimized for Blog/Content Integration</li>
          <li>Fully Responsive Design</li>
          <li>Dark Mode Ready</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="text-center mt-12 p-4 text-gray-600 dark:text-gray-400 text-sm">
    <p>&copy; 2023 Vintage Vibes Gallery. All rights reserved.</p>
  </footer>

</div>

Gallery Component

A responsive gallery component with a glassmorphism effect, vibrant colors, and dark theme support, suitable for a dashboard.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center mb-8 text-gray-800 dark:text-white">Our Vibrant Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Gallery Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-purple-800 dark:text-purple-300">Project Alpha</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">A sleek design project showcasing modern aesthetics.</p>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-red-800 dark:text-red-300">Innovate Beta</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Cutting-edge technology integrated with user-centric design.</p>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-green-800 dark:text-green-300">Data Drive</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Visualizing complex data into intuitive and actionable insights.</p>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum4/400/300" alt="Gallery Image 4" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-blue-800 dark:text-blue-300">Analytics Flow</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Interactive dashboards for real-time performance monitoring.</p>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum5/400/300" alt="Gallery Image 5" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-yellow-800 dark:text-yellow-300">Growth Metrics</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Tracking key growth indicators with dynamic charts.</p>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
        <img src="https://picsum.photos/seed/picsum6/400/300" alt="Gallery Image 6" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="font-bold text-xl mb-2 text-pink-800 dark:text-pink-300">User Insights</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm">Understanding user behavior through comprehensive reports.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Gallery Component

A responsive Gallery Component using Tailwind CSS with Material Design style, suitable for a dashboard with dark theme support.

Open Preview

                <div class="container mx-auto p-6">
    <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-gray-100 mb-6">Gallery Component</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <!-- Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/300" alt="Image 1" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 1</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 1.</p>
        </div>
        
        <!-- Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/301" alt="Image 2" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 2</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 2.</p>
        </div>
        
        <!-- Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/302" alt="Image 3" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 3</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 3.</p>
        </div>
        
        <!-- Card 4 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/303" alt="Image 4" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 4</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 4.</p>
        </div>
        
        <!-- More cards -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/304" alt="Image 5" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 5</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 5.</p>
        </div>
        
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/305" alt="Image 6" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 6</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 6.</p>
        </div>
    </div>
</div>

Gallery Component

A responsive gallery component using Tailwind CSS with Skeuomorphism design, Pastel color scheme, and moderate complexity for social media purposes. Includes dark mode support and uses picsum.photos for images and randomuser.me for avatars.

Open Preview

                <div class="container mx-auto px-4 py-8 dark:bg-gray-800">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of user 1">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 1</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar of user 2">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 2</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
     <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar of user 3">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 3</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Gallery Component

Responsive Gallery Component with 3D Design, Analogous Color Scheme, and Dark Mode Support for Social Media interfaces.

Open Preview

                <div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="-m-1 flex flex-wrap md:-m-2">
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=1"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=2"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=3"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=4"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=5"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=6"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
  </div>
</div>

Search Components

Categories

Gallery