Search Components

Gallery

Component for displaying multiple images

Corporate/Professional Gallery Component

A responsive and versatile image gallery component with a corporate/professional aesthetic, using a forest/green color palette. Designed for educational platforms, it provides a clean and trustworthy interface with dark mode support.

Open Preview

                <section class="py-8 sm:py-12 bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-10 sm:mb-16">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white capitalize leading-tight mb-4">
        Explore Our Learning Resources
      </h2>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
        Dive into our extensive collection of educational materials, designed to enhance your learning journey.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
      <!-- Gallery Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/10/600/400" alt="Course thumbnail depicting a calm lake with mountains">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Web Development</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Foundations of Modern Web Design</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Master the core principles of responsive web design using HTML5, CSS3, and modern frameworks.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">John Doe</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$49.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1015/600/400" alt="Course thumbnail depicting a camera and coffee">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Digital Marketing</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Advanced SEO Strategies for Growth</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Learn to boost your online visibility and drive organic traffic with proven SEO tactics.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Jane Smith</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$69.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1/600/400" alt="Course thumbnail depicting office supplies and a laptop">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Business & Finance</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Financial Modeling & Analysis</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Build robust financial models and make informed decisions with this comprehensive course.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Robert Johnson</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$89.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/20/600/400" alt="Course thumbnail depicting a network hub">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">IT & Software</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Cybersecurity Fundamentals</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Understand the threats and learn to protect digital systems and networks from attacks.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Emily White</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$79.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/29/600/400" alt="Course thumbnail depicting a book and coffee">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Personal Development</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Effective Communication Skills</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Enhance your interpersonal skills and learn to communicate clearly and persuasively.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Michael Green</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$39.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/30/600/400" alt="Course thumbnail depicting painting supplies">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Arts & Crafts</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Introduction to Digital Painting</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Unlock your creativity and learn the techniques of digital painting using popular software.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Sophia Lee</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$59.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 7 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1005/600/400" alt="Course thumbnail depicting a forest and lake">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Nature & Environment</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Sustainable Living Practices</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Discover eco-friendly habits and contribute to a healthier planet.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">David Clark</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">Free</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 8 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1041/600/400" alt="Course thumbnail depicting a brain scan">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Science & Health</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Introduction to Neuroscience</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Explore the complexities of the human brain and nervous system in this introductory course.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Olivia Brown</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$74.99</span>
          </div>
        </div>
      </div>

    </div>

    <!-- Call to action / Category filter below the grid -->
    <div class="mt-10 sm:mt-16 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 dark:focus:ring-offset-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-200">
        View All Courses
        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>

  </div>
</section>

E-commerce Product Gallery

A minimalist and responsive product gallery component for e-commerce, featuring ocean/blue tones, dark mode support, and interactive image display.

Open Preview

                <div class="bg-blue-50 dark:bg-gray-900 py-8 sm:py-12">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold text-blue-900 dark:text-blue-100 mb-8 text-center">
      Featured Products
    </h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1015/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Ocean Wave Speaker</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Immersive sound experience</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$129.99</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1041/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Azure Comfort Cushion</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Soft & elegant seating</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$39.99</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1025/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Deep Sea Watch</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Water-resistant smart device</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$249.99</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1053/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Sky Blue Backpack</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Lightweight & durable</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$79.50</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1063/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Coral Reef Artwork</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Vibrant wall decor</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$189.00</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1070/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Ocean Breeze Diffuser</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Relaxing aromatherapy</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$49.99</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 7 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1084/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Nautical Compass Mug</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">For your morning brew</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$18.75</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 8 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
        <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
          <img src="https://picsum.photos/id/1018/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Aqua Fitness Bottle</h3>
          <p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Stay hydrated in style</p>
          <div class="flex justify-between items-center">
            <span class="text-xl font-bold text-blue-900 dark:text-blue-100">$22.00</span>
            <button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
              Add to Cart
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Real Estate Gallery Component

A responsive and professional gallery component for real estate listings, featuring a clean layout, pastel color scheme, and full dark mode support. Includes property cards with details, a filter/sort section, and a clear call to action.

Open Preview

                <div class="bg-blue-50 dark:bg-gray-900 py-8 lg:py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-8 lg:mb-12">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-200 mb-4">Premium Property Listings</h2>
      <p class="text-lg text-blue-700 dark:text-blue-300 max-w-2xl mx-auto">Explore our wide selection of exquisite properties, meticulously curated to meet your highest standards.</p>
    </div>

    <!-- Filters & Sort -->
    <div class="flex flex-col sm:flex-row items-center justify-between mb-8 space-y-4 sm:space-y-0 sm:space-x-4">
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-white dark:bg-gray-800 border border-blue-200 dark:border-gray-700 text-blue-700 dark:text-blue-300 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <option>All Locations</option>
          <option>New York</option>
          <option>Los Angeles</option>
          <option>Chicago</option>
          <option>Houston</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-blue-700 dark:text-blue-300">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
      </div>
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-white dark:bg-gray-800 border border-blue-200 dark:border-gray-700 text-blue-700 dark:text-blue-300 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <option>All Types</option>
          <option>House</option>
          <option>Apartment</option>
          <option>Condo</option>
          <option>Land</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-blue-700 dark:text-blue-300">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"/></svg>
        </div>
      </div>
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-white dark:bg-gray-800 border border-blue-200 dark:border-gray-700 text-blue-700 dark:text-blue-300 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <option>Sort by: Newest</option>
          <option>Sort by: Price (Low to High)</option>
          <option>Sort by: Price (High to Low)</option>
          <option>Sort by: Popularity</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-blue-700 dark:text-blue-300">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
      </div>
    </div>

    <!-- Property Grid -->
    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Property Card 1 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/10/400/300" alt="Modern Home" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Spacious Family Home</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>123 Grand Ave, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 4 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 3 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 2400 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$750,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 2 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/20/400/300" alt="Luxury Apartment" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Downtown Loft Apartment</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>456 High St, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 2 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 2 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 1100 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$480,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 3 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/30/400/300" alt="Suburban House" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Charming Suburban Home</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>789 Oak Ln, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 3 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 2 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 1800 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$595,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 4 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/40/400/300" alt="Waterfront Villa" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Stunning Waterfront Villa</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>101 Bay View, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 5 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 4 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 3200 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$1,200,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 5 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/50/400/300" alt="Cozy Condo" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Cozy City Center Condo</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>202 Metro Blvd, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 1 Bed</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 1 Bath</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 750 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$320,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 6 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/60/400/300" alt="Rural Estate" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Expansive Rural Estate</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>303 Country Rd, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 6 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 5 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 4500 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$1,800,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 7 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/70/400/300" alt="Newly Built" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Brand New Modern Build</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>404 Innovation Dr, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 4 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 3 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 2800 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$890,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 8 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/80/400/300" alt="Renovated Charm" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Historic Fully Renovated</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>505 Heritage Pkwy, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 3 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 2 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 1600 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$620,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

    </div>

    <!-- Pagination (optional, but good for complex components) -->
    <div class="flex justify-center mt-10">
      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="sr-only">Previous</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-current="page" class="z-10 bg-blue-100 dark:bg-blue-700 border-blue-500 text-blue-600 dark:text-blue-100 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          2
        </a>
        <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300">
          ...
        </span>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="sr-only">Next</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </nav>
    </div>

  </div>
</div>

<!-- Font Awesome for icons (optional, but used in the example) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Event_Gallery_Component

A responsive gallery component for event and conference websites, featuring jewel tones, color gradients, smooth transitions, and dark mode support. It showcases event highlights or speaker images in a visually engaging grid.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-800 to-indigo-900 text-white py-12 px-4 sm:px-6 lg:px-8 dark:from-gray-900 dark:to-black">
  <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 mb-4 bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-sapphire-500 to-ruby-600 dark:from-emerald-300 dark:via-sapphire-400 dark:to-ruby-500 pb-2">
        Event Highlights
      </h2>
      <p class="text-lg sm:text-xl text-indigo-200 dark:text-gray-400 leading-relaxed max-w-3xl mx-auto">
        Relive the moments and explore the vibrant atmosphere of our past events. From insightful keynotes to engaging workshops, witness the energy that defines us.
      </p>
    </div>

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

      <!-- Gallery Item 1 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50">
        <img src="https://picsum.photos/id/1015/600/400" alt="Event Moment 1" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-emerald-300 to-cyan-400 dark:from-emerald-200 dark:to-cyan-300">Keynote Address</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Inspiring words from industry leaders, setting the stage for innovation.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker Avatar" class="w-9 h-9 rounded-full border-2 border-emerald-400">
            <span class="text-sm text-emerald-200 dark:text-emerald-300">John Doe</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Highlight</div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-cyan-500/50 dark:hover:shadow-cyan-700/50">
        <img src="https://picsum.photos/id/1018/600/400" alt="Event Moment 2" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-blue-400 dark:from-cyan-200 dark:to-blue-300">Networking Session</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Connecting minds and fostering collaborations among attendees.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Attendee Avatar" class="w-9 h-9 rounded-full border-2 border-cyan-400">
            <span class="text-sm text-cyan-200 dark:text-cyan-300">Sarah Lee</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Connect</div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-red-500/50 dark:hover:shadow-red-700/50">
        <img src="https://picsum.photos/id/1019/600/400" alt="Event Moment 3" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-red-300 to-purple-400 dark:from-red-200 dark:to-purple-300">Interactive Workshop</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Hands-on learning and practical application of new skills.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Instructor Avatar" class="w-9 h-9 rounded-full border-2 border-red-400">
            <span class="text-sm text-red-200 dark:text-red-300">David Kim</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Learn</div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-indigo-500/50 dark:hover:shadow-indigo-700/50">
        <img src="https://picsum.photos/id/1025/600/400" alt="Event Moment 4" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-indigo-300 to-pink-400 dark:from-indigo-200 dark:to-pink-300">Panel Discussion</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Expert insights and lively debates on future trends.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/66.jpg" alt="Panelist Avatar" class="w-9 h-9 rounded-full border-2 border-indigo-400">
            <span class="text-sm text-indigo-200 dark:text-indigo-300">Emily White</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Discuss</div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-purple-700/50">
        <img src="https://picsum.photos/id/1035/600/400" alt="Event Moment 5" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-purple-300 to-fuchsia-400 dark:from-purple-200 dark:to-fuchsia-300">Product Showcase</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Innovations unveiled and solutions demonstrated live.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Innovator Avatar" class="w-9 h-9 rounded-full border-2 border-purple-400">
            <span class="text-sm text-purple-200 dark:text-purple-300">Michael Green</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Innovate</div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-rose-500/50 dark:hover:shadow-rose-700/50">
        <img src="https://picsum.photos/id/1040/600/400" alt="Event Moment 6" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-rose-300 to-orange-400 dark:from-rose-200 dark:to-orange-300">Closing Ceremony</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">A memorable conclusion celebrating achievements and looking forward.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Host Avatar" class="w-9 h-9 rounded-full border-2 border-rose-400">
            <span class="text-sm text-rose-200 dark:text-rose-300">Jessica Brown</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Celebrate</div>
      </div>

    </div>

    <div class="text-center mt-16">
      <a href="#" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-full shadow-lg text-white bg-gradient-to-r from-emerald-500 to-indigo-600 transition-transform duration-300 hover:scale-105 hover:from-emerald-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:from-emerald-600 dark:to-indigo-700 dark:hover:from-emerald-700 dark:hover:to-indigo-800">
        View All Moments
        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>

Skeuomorphic Crypto Gallery

A complex skeuomorphic gallery component designed for cryptocurrency and blockchain applications, featuring complementary colors, responsiveness, and dark mode support. It mimics real-world elements like recessed buttons and embossed frames.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">

  <!-- Component Title -->
  <h1 class="text-4xl sm:text-5xl font-extrabold mb-8 text-center text-gray-900 dark:text-gray-100 drop-shadow-lg">
    <span class="bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600 dark:from-teal-400 dark:to-blue-500">Crypto Art Vault</span>
  </h1>

  <!-- Gallery Controls (Top) -->
  <div class="mb-8 flex flex-col sm:flex-row items-center justify-between rounded-xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md">
    <div class="flex items-center space-x-4 mb-4 sm:mb-0">
      <button class="p-3 rounded-full bg-gradient-to-br from-teal-500 to-blue-600 dark:from-teal-400 dark:to-blue-500 text-white shadow-neu-light-inner dark:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200 flex items-center justify-center w-12 h-12 flex-shrink-0">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
      </button>
      <button class="p-3 rounded-full bg-gradient-to-br from-blue-600 to-teal-500 dark:from-blue-500 dark:to-teal-400 text-white shadow-neu-light-inner dark:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200 flex items-center justify-center w-12 h-12 flex-shrink-0">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
      <div class="relative inline-block text-left">
        <button type="button" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-xl text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-inner dark:hover:shadow-neu-dark-inner focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-teal-400 transition-all duration-200" id="options-menu" aria-haspopup="true" aria-expanded="true">
          Category <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
        </button>
        <!-- Dropdown menu (hidden by default) - for a real implementation, this would be toggled by JS -->
        <div class="origin-top-left absolute left-0 mt-2 w-56 rounded-md shadow-neu-light-lg dark:shadow-neu-dark-lg bg-gray-100 dark:bg-gray-800 ring-1 ring-black ring-opacity-5 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
          <div class="py-1" role="none">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors duration-200" role="menuitem">All NFTs</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors duration-200" role="menuitem">Genesis Collection</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors duration-200" role="menuitem">Digital Sculptures</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors duration-200" role="menuitem">Pixel Art</a>
          </div>
        </div>
      </div>
    </div>
    <div class="relative w-full sm:w-auto">
      <input type="text" placeholder="Search NFTs..." class="py-3 pr-12 pl-6 w-full sm:w-72 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 shadow-neu-light-inner dark:shadow-neu-dark-inner focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-200 dark:ring-offset-gray-800 focus:ring-teal-500 dark:focus:ring-teal-400 transition-all duration-200">
      <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-gray-500 dark:text-gray-400">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
    </div>
  </div>

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

    <!-- NFT Card 1 -->
    <div class="group relative rounded-2xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-lg dark:hover:shadow-neu-dark-lg transition-all duration-300 flex flex-col">
      <div class="relative aspect-video rounded-xl overflow-hidden mb-4 shadow-neu-light-inner dark:shadow-neu-dark-inner">
        <img src="https://picsum.photos/id/1053/400/225" alt="NFT Image" class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-300">
        <div class="absolute top-3 right-3 p-2 rounded-full bg-gray-50 dark:bg-gray-900 shadow-neu-light-md dark:shadow-neu-dark-md text-gray-700 dark:text-gray-300 text-xs font-semibold select-none">LIVE BID</div>
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 truncate">The Cybernetic Golem</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">A unique digital sculpture transcending physical limitations.</p>
      <div class="flex items-center justify-between text-sm mb-4">
        <div class="flex items-center space-x-2">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Creator Avatar" class="w-8 h-8 rounded-full shadow-neu-light-inner dark:shadow-neu-dark-inner">
          <span class="text-gray-700 dark:text-gray-300 font-medium">@NFT_Visionary</span>
        </div>
        <div class="flex items-center space-x-1">
          <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
          <span class="text-gray-600 dark:text-gray-400">12 Likes</span>
        </div>
      </div>
      <div class="relative flex items-center justify-between mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex flex-col">
          <span class="text-xs text-gray-500 dark:text-gray-400">Current Bid</span>
          <span class="text-lg font-bold text-teal-600 dark:text-teal-400">3.2 ETH</span>
        </div>
        <button class="px-5 py-2 rounded-xl bg-gradient-to-br from-blue-500 to-teal-600 dark:from-blue-400 dark:to-teal-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
          Place Bid
        </button>
      </div>
    </div>

    <!-- NFT Card 2 -->
    <div class="group relative rounded-2xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-lg dark:hover:shadow-neu-dark-lg transition-all duration-300 flex flex-col">
      <div class="relative aspect-video rounded-xl overflow-hidden mb-4 shadow-neu-light-inner dark:shadow-neu-dark-inner">
        <img src="https://picsum.photos/id/1063/400/225" alt="NFT Image" class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-300">
        <div class="absolute top-3 right-3 p-2 rounded-full bg-gray-50 dark:bg-gray-900 shadow-neu-light-md dark:shadow-neu-dark-md text-gray-700 dark:text-gray-300 text-xs font-semibold select-none">ENDED</div>
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 truncate">Quantum Landscapes</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">Exploring the impossible geometries of quantum realms.</p>
      <div class="flex items-center justify-between text-sm mb-4">
        <div class="flex items-center space-x-2">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Creator Avatar" class="w-8 h-8 rounded-full shadow-neu-light-inner dark:shadow-neu-dark-inner">
          <span class="text-gray-700 dark:text-gray-300 font-medium">@PixelSynth</span>
        </div>
        <div class="flex items-center space-x-1">
          <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
          <span class="text-gray-600 dark:text-gray-400">20 Likes</span>
        </div>
      </div>
      <div class="relative flex items-center justify-between mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex flex-col">
          <span class="text-xs text-gray-500 dark:text-gray-400">Sold For</span>
          <span class="text-lg font-bold text-gray-900 dark:text-gray-100">5.0 ETH</span>
        </div>
        <button class="px-5 py-2 rounded-xl bg-gradient-to-br from-gray-400 to-gray-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md cursor-not-allowed opacity-70" disabled>
          View Sale
        </button>
      </div>
    </div>

    <!-- NFT Card 3 -->
    <div class="group relative rounded-2xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-lg dark:hover:shadow-neu-dark-lg transition-all duration-300 flex flex-col">
      <div class="relative aspect-video rounded-xl overflow-hidden mb-4 shadow-neu-light-inner dark:shadow-neu-dark-inner">
        <img src="https://picsum.photos/id/111/400/225" alt="NFT Image" class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-300">
        <div class="absolute top-3 right-3 p-2 rounded-full bg-gray-50 dark:bg-gray-900 shadow-neu-light-md dark:shadow-neu-dark-md text-gray-700 dark:text-gray-300 text-xs font-semibold select-none">ON AUCTION</div>
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 truncate">Neon Genesis Glitch</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">A captivating glitch art piece from the 90s digital era.</p>
      <div class="flex items-center justify-between text-sm mb-4">
        <div class="flex items-center space-x-2">
          <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Creator Avatar" class="w-8 h-8 rounded-full shadow-neu-light-inner dark:shadow-neu-dark-inner">
          <span class="text-gray-700 dark:text-gray-300 font-medium">@DataGhost</span>
        </div>
        <div class="flex items-center space-x-1">
          <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
          <span class="text-gray-600 dark:text-gray-400">18 Likes</span>
        </div>
      </div>
      <div class="relative flex items-center justify-between mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex flex-col">
          <span class="text-xs text-gray-500 dark:text-gray-400">Min. Bid</span>
          <span class="text-lg font-bold text-teal-600 dark:text-teal-400">1.8 ETH</span>
        </div>
        <button class="px-5 py-2 rounded-xl bg-gradient-to-br from-blue-500 to-teal-600 dark:from-blue-400 dark:to-teal-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
          Place Bid
        </button>
      </div>
    </div>

    <!-- NFT Card 4 -->
    <div class="group relative rounded-2xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-lg dark:hover:shadow-neu-dark-lg transition-all duration-300 flex flex-col">
      <div class="relative aspect-video rounded-xl overflow-hidden mb-4 shadow-neu-light-inner dark:shadow-neu-dark-inner">
        <img src="https://picsum.photos/id/1075/400/225" alt="NFT Image" class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-300">
        <div class="absolute top-3 right-3 p-2 rounded-full bg-gray-50 dark:bg-gray-900 shadow-neu-light-md dark:shadow-neu-dark-md text-gray-700 dark:text-gray-300 text-xs font-semibold select-none">LIVE BID</div>
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 truncate">The Decentralized Soul</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">An abstract representation of the blockchain's core essence.</p>
      <div class="flex items-center justify-between text-sm mb-4">
        <div class="flex items-center space-x-2">
          <img src="https://randomuser.me/api/portraits/women/66.jpg" alt="Creator Avatar" class="w-8 h-8 rounded-full shadow-neu-light-inner dark:shadow-neu-dark-inner">
          <span class="text-gray-700 dark:text-gray-300 font-medium">@Crypto_Canvas</span>
        </div>
        <div class="flex items-center space-x-1">
          <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
          <span class="text-gray-600 dark:text-gray-400">15 Likes</span>
        </div>
      </div>
      <div class="relative flex items-center justify-between mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex flex-col">
          <span class="text-xs text-gray-500 dark:text-gray-400">Current Bid</span>
          <span class="text-lg font-bold text-teal-600 dark:text-teal-400">2.5 ETH</span>
        </div>
        <button class="px-5 py-2 rounded-xl bg-gradient-to-br from-blue-500 to-teal-600 dark:from-blue-400 dark:to-teal-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
          Place Bid
        </button>
      </div>
    </div>

    <!-- Placeholder Card for more items -->
    <div class="flex flex-col items-center justify-center rounded-2xl p-6 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md border-2 border-dashed border-gray-400 dark:border-gray-600 text-gray-500 dark:text-gray-400 text-center">
      <svg class="w-16 h-16 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      <p class="text-lg font-semibold">Discover More NFTs</p>
      <p class="text-sm mb-4">More unique digital creations await.</p>
      <button class="px-6 py-3 rounded-xl bg-gradient-to-br from-teal-500 to-blue-600 dark:from-teal-400 dark:to-blue-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
        Explore All
      </button>
    </div>

  </div>

  <!-- Bottom Navigation/Pagination (Skeuomorphic style) -->
  <div class="mt-12 flex justify-center">
    <nav class="inline-flex items-center space-x-2 rounded-2xl p-3 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md">
      <button class="p-3 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 shadow-neu-light-inner dark:shadow-neu-dark-inner hover:text-teal-600 dark:hover:text-teal-400 active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
      </button>
      <a href="#" class="px-4 py-2 rounded-xl bg-blue-500 dark:bg-blue-600 text-white font-bold shadow-neu-light-md dark:shadow-neu-dark-md shadow-neu-light-inner dark:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">1</a>
      <a href="#" class="px-4 py-2 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-inner dark:hover:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">2</a>
      <span class="px-4 py-2 text-gray-500 dark:text-gray-400">...</span>
      <a href="#" class="px-4 py-2 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-inner dark:hover:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">10</a>
      <button class="p-3 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 shadow-neu-light-inner dark:shadow-neu-dark-inner hover:text-teal-600 dark:hover:text-teal-400 active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      </button>
    </nav>
  </div>

</div>

<!-- Custom Tailwind CSS (for skeuomorphism) -->
<style>
  /* Light Mode Shadows */
  .shadow-neu-light-md {
    box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px rgba(255, 255, 255, 0.9);
  }
  .shadow-neu-light-lg {
    box-shadow: 10px 10px 20px rgba(174, 174, 192, 0.5), -10px -10px 20px rgba(255, 255, 255, 1);
  }
  .shadow-neu-light-inner {
    box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
  }
  .shadow-neu-light-pressed {
    box-shadow: inset 6px 6px 12px rgba(174, 174, 192, 0.4), inset -6px -6px 12px rgba(255, 255, 255, 0.9);
  }

  /* Dark Mode Shadows */
  .dark .shadow-neu-dark-md {
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6), -6px -6px 12px rgba(100, 100, 100, 0.2);
  }
  .dark .shadow-neu-dark-lg {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(100, 100, 100, 0.3);
  }
  .dark .shadow-neu-dark-inner {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.5), inset -3px -3px 6px rgba(100, 100, 100, 0.15);
  }
  .dark .shadow-neu-dark-pressed {
    box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.6), inset -6px -6px 12px rgba(100, 100, 100, 0.2);
  }
</style>

Corporate/Professional Fashion/Beauty Gallery

A clean, trustworthy, and responsive image gallery component suitable for corporate fashion and beauty brands, featuring a triadic color scheme and dark mode support.

Open Preview

                <section class="py-12 bg-indigo-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <div class="container mx-auto px-4">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-extrabold mb-4 text-indigo-800 dark:text-indigo-400">Our Latest Collection</h2>
      <p class="text-lg leading-relaxed max-w-2xl mx-auto text-gray-600 dark:text-gray-400">Explore our exquisite range of fashion and beauty essentials, curated with elegance and precision for the modern individual.</p>
    </div>

    <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="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1012/600/400" alt="Fashion Model" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Spring Elegance Dress</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">A timeless piece designed for ultimate comfort and style.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$120</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Discover the perfect blend of modern design and classic appeal.</p>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1015/600/400" alt="Beauty Product" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Radiant Glow Serum</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Achieve glowing skin with our specially formulated serum.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$45</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Infused with natural extracts to revitalize and nourish your complexion.</p>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1018/600/400" alt="Accesory" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Luxury Leather Bag</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Crafted from premium leather, a statement of true sophistication.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$280</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Perfect for every occasion, combining elegance with practical design.</p>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1020/600/400" alt="Cosmetic" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Velvet Matte Lipstick</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Intensely pigmented for a rich, long-lasting matte finish.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$25</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Experience a smooth application and vivid color that stays all day.</p>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1025/600/400" alt="Footwear" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Elegant Pointed Heels</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Sophistication meets comfort in these meticulously crafted heels.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$95</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Step out in confidence with our latest collection of chic footwear.</p>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1033/600/400" alt="Skincare" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Hydrating Face Mask</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Rejuvenate your skin with our deeply hydrating and nourishing mask.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$30</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Pamper your skin with a rich blend of essential vitamins and minerals.</p>
        </div>
      </div>

      <!-- Gallery Item 7 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1041/600/400" alt="Jewelry" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Dazzling Diamond Necklace</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">A sparkling statement piece, perfect for any special occasion.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$350</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Add a touch of brilliance to your ensemble with this exquisite design.</p>
        </div>
      </div>

      <!-- Gallery Item 8 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1043/600/400" alt="Fragrance" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Sophisticated Eau de Parfum</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">An enchanting blend of notes, capturing timeless elegance.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$85</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Leave a lasting impression with this luxurious and captivating scent.</p>
        </div>
      </div>

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

Minimalist Gallery Component

A responsive and minimalist image gallery component with a sunset/warm color scheme, suitable for technology/SaaS applications. Includes dark mode support.

Open Preview

                <section class="py-8 px-4 bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-orange-600 dark:text-orange-400 text-center mb-6 sm:mb-8 md:mb-10">
      Our Featured Designs
    </h2>
    <p class="text-lg text-gray-700 dark:text-gray-300 text-center mb-8 sm:mb-10 lg:mb-12 max-w-2xl mx-auto leading-relaxed">
      Explore our collection of sophisticated and user-friendly interfaces, crafted with precision and passion.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 lg:gap-8">
      <!-- Gallery Item 1 -->
      <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
        <div class="relative pb-2/3 overflow-hidden group">
          <img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1018/600/400" alt="Gallery Image 1">
          <div class="absolute inset-0 bg-yellow-500 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="p-5 flex-grow flex flex-col">
          <h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Intuitive Dashboard</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">A clean and powerful analytics dashboard designed for clarity.</p>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
        <div class="relative pb-2/3 overflow-hidden group">
          <img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1043/600/400" alt="Gallery Image 2">
          <div class="absolute inset-0 bg-red-500 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="p-5 flex-grow flex flex-col">
          <h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Seamless Onboarding</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Guiding users through their first experience with ease.</p>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
        <div class="relative pb-2/3 overflow-hidden group">
          <img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1025/600/400" alt="Gallery Image 3">
          <div class="absolute inset-0 bg-orange-500 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="p-5 flex-grow flex flex-col">
          <h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Responsive Reporting</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Reports that look great on any device, any time.</p>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
        <div class="relative pb-2/3 overflow-hidden group">
          <img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1057/600/400" alt="Gallery Image 4">
          <div class="absolute inset-0 bg-yellow-600 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="p-5 flex-grow flex flex-col">
          <h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">API Integration UI</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Simplified user interfaces for complex integrations.</p>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
        <div class="relative pb-2/3 overflow-hidden group">
          <img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1074/600/400" alt="Gallery Image 5">
          <div class="absolute inset-0 bg-red-600 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="p-5 flex-grow flex flex-col">
          <h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Mobile-First Design</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Experience the best on any mobile device.</p>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
        <div class="relative pb-2/3 overflow-hidden group">
          <img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1080/600/400" alt="Gallery Image 6">
          <div class="absolute inset-0 bg-orange-600 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="p-5 flex-grow flex flex-col">
          <h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Customization Options</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Giving users the power to personalize their experience.</p>
        </div>
      </div>
    </div>
  </div>
</section>

3D_Muted_Gallery_Component

A complex, responsive gallery component with a 3D design aesthetic, muted color scheme, and dark mode support, suitable for a blog or content consumption.

Open Preview

                <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>

JewelTone_Photography_Gallery

A complex, responsive photography gallery component with jewel tone colors and a clean, typographic layout, featuring grid systems and dark mode support. Ideal for photographer portfolios.

Open Preview

                <div class="bg-zinc-100 dark:bg-zinc-900 min-h-screen p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">

  <!-- Gallery Header -->
  <header class="max-w-7xl mx-auto mb-8 sm:mb-12 text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-emerald-700 dark:text-emerald-400 mb-4 tracking-tight">
      Capturing Moments
    </h1>
    <p class="text-lg sm:text-xl text-zinc-700 dark:text-zinc-300 leading-relaxed max-w-2xl mx-auto">
      Explore a curated collection of visual stories, where light meets emotion and every frame tells a tale.
    </p>
    <div class="mt-6 flex justify-center space-x-4">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-sapphire-700 hover:bg-sapphire-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600 dark:focus:ring-sapphire-400">
        View All Galleries
      </a>
      <a href="#" class="inline-flex items-center px-6 py-3 border border-zinc-300 dark:border-zinc-700 text-base font-medium rounded-md text-zinc-700 bg-white hover:bg-zinc-50 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
        About The Artist
      </a>
    </div>
  </header>

  <!-- Gallery Categories/Filters -->
  <nav class="max-w-7xl mx-auto mb-8 sm:mb-12">
    <ul class="flex flex-wrap justify-center gap-3 sm:gap-4">
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-ruby-200 text-ruby-800 dark:bg-ruby-800 dark:text-ruby-200 hover:bg-ruby-300 dark:hover:bg-ruby-700 transition-colors duration-200">
          All
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Nature
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Portraits
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Abstract
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Urban
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Events
        </a>
      </li>
    </ul>
  </nav>

  <!-- Photo Grid -->
  <section class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

    <!-- Photo Card 1 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1057/700/500" alt="Forest Stream" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Whispers of the Forest</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">A serene stream winding through ancient trees, captured in soft morning light.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A1 1 0 0011.379 3H8.621a1 1 0 00-.707.293L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
          <span>Nature & Landscape</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">5.2K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 2 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1025/700/500" alt="Woman's Portrait" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Gaze of Serenity</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">A captivating portrait capturing the quiet strength and beauty of a woman.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
          <span>Portraits</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">8.1K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 3 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1080/700/500" alt="Abstract Light" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Chromatic Dance</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">An mesmerizing play of light and shadow, forming abstract patterns.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.243 3.636a1 1 0 011.514 0l3.05 4.195a1 1 0 01-.061 1.488l-2.43 2.193a1 1 0 01-1.353-.105l-1.89-2.122a1 1 0 01.105-1.353l2.193-2.43a1 1 0 011.488-.061L12.364 8.243a1 1 0 00-.707 1.707l-2.414 2.414a1 1 0 01-1.414 0L6.707 10.707a1 1 0 00-1.707.707l2.414 2.414a1 1 0 010 1.414l-2.414 2.414a1 1 0 00-.707 1.707l2.414 2.414a1 1 0 010 1.414l-2.414 2.414a1 1 0 00-.707 1.707l2.414 2.414a1 1 0 010 1.414L3.636 17.243a1 1 0 01-1.414 0L.707 15.121a1 1 0 00-1.707.707l2.414 2.414a1 1 0 010 1.414L.707 20a1 1 0 00-.707.707l2.414 2.414a1 1 0 010 1.414L3.636 24.364a1 1 0 011.414 0L5.757 26a1 1 0 001.707-.707l-2.414-2.414a1 1 0 010-1.414zM10 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"></path></svg>
          <span>Abstract Art</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">3.9K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 4 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1012/700/500" alt="Cityscape at Night" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Neon Metropolis</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">The vibrant energy of a city skyline illuminated by countless lights.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          <span>Urban & Architecture</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">6.5K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 5 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1039/700/500" alt="Desert Landscape" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Echoes of the Sand</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">Vast and silent desert landscape under a dramatic sky.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A1 1 0 0011.379 3H8.621a1 1 0 00-.707.293L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
          <span>Nature & Landscape</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">4.8K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 6 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1042/700/500" alt="Coffee Shop Interior" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Urban Canvas</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">The cozy ambiance of a bustling coffee shop.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          <span>Urban & Events</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">5.9K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 7 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1050/700/500" alt="Mountains and Lake" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Alpine Reflection</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">Majestic mountains mirroring in a clear alpine lake.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A1 1 0 0011.379 3H8.621a1 1 0 00-.707.293L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
          <span>Nature & Landscape</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">7.0K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 8 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1060/700/500" alt="Historical Building" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Timeless Stone</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">An ancient architectural marvel standing against the test of time.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          <span>Architecture</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">4.1K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

  </section>

  <!-- Call to Action / Footer -->
  <footer class="max-w-7xl mx-auto mt-12 sm:mt-16 text-center">
    <div class="bg-ruby-100 dark:bg-ruby-900 rounded-lg p-6 sm:p-8 flex flex-col sm:flex-row items-center justify-between shadow-inner space-y-4 sm:space-y-0">
      <div class="text-ruby-800 dark:text-ruby-200 text-xl sm:text-2xl font-bold">
        Ready to bring your vision to life?
      </div>
      <a href="#" class="px-8 py-3 bg-ruby-600 text-white rounded-md shadow-lg hover:bg-ruby-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ruby-500 dark:bg-ruby-500 dark:hover:bg-ruby-600">
        Contact Me
      </a>
    </div>
    <p class="mt-8 text-zinc-500 dark:text-zinc-400 text-sm">
      &copy; 2023 JewelTone Photography. All rights reserved.
    </p>
  </footer>

</div>

Brutalist Gallery Component

A responsive, brutalist-inspired gallery component for entertainment platforms, featuring high-contrast cool neutrals and dark mode support.

Open Preview

                <div class="font-sans bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen">

  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 sm:mb-12 text-gray-900 dark:text-gray-50 border-b-4 border-gray-900 dark:border-gray-50 pb-4 tracking-tighter uppercase">
      <span class="block">The Vault</span>
      <span class="block text-2xl sm:text-3xl md:text-4xl font-light normal-case">A Gallery of Visual Noise</span>
    </h1>

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

      <!-- Gallery Item 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1018/600/400" alt="Abstract Visual" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Dystopian Horizon</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">A raw exploration of forgotten landscapes, echoing the solitude of derelict futures. Captured with a stark, unforgiving lens.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            View Project
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">HD</div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1043/600/400" alt="Geometric Composition" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Concrete Echoes</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">Harsh light and deep shadows define this urban series, a tribute to the monumental structures that shape our existence.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            Explore More
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">4K</div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1069/600/400" alt="Industrial Abstraction" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">System Failure</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">A raw glimpse into the gears and conduits of a collapsing system. Beauty in the breakdown, stark and unyielding.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            See Portfolio
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">NEW</div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1080/600/400" alt="Monolithic Structure" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Urban Decay</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">Unflinching views of abandoned spaces, where rust and resilience tell stories of cycles lost and found.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            View Collection
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">HD</div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1084/600/400" alt="Gritty Texture" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Raw Data</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">Bare, unadorned visuals stripping away veneer to reveal the harsh truth beneath. A digital deconstruction.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            Download Raws
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">LIVE</div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1049/600/400" alt="Minimalist Concrete" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Oblivion Walls</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">Exploring the vast indifference of stark, unyielding architecture. A commentary on human scale in colossal spaces.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            View Series
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">VR</div>
      </div>

    </div>

    <div class="mt-12 text-center">
      <button type="button" class="bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-4 border-gray-900 dark:border-gray-50 py-3 px-8 text-lg sm:text-xl font-bold uppercase tracking-wider shadow-lg hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-300">
        Load More Chaos
      </button>
    </div>

  </div>

</div>