Gallery

Gallery Component

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

Open Preview

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

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

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

Gallery Component

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

Open Preview

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

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

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

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

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

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

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

  </div>

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

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

</div>

Gallery Component

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

Open Preview

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

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

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

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

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

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

Gallery Component

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

Open Preview

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

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

Open Preview

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

Gallery Component

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

Open Preview

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

E-commerce Product Gallery

A complex, responsive, and dark-theme compatible gallery component with a minimalist design, a complementary color scheme, and multiple interactive elements suitable for e-commerce.

Open Preview

                <div class="dark:bg-gray-900 dark:text-white min-h-screen">
  <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-center mb-8">Product Gallery</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 overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2">Product Title 1</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-900 dark:text-white">$19.99</span>
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>Category</span>
            <span>In Stock</span>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2">Product Title 2</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-900 dark:text-white">$29.50</span>
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>Category</span>
            <span>In Stock</span>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2">Product Title 3</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-900 dark:text-white">$45.00</span>
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>Category</span>
            <span>Out of Stock</span>
          </div>
        </div>
      </div>
      
      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2">Product Title 4</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-900 dark:text-white">$15.75</span>
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>Category</span>
            <span>In Stock</span>
          </div>
        </div>
      </div>

      <!-- Add more product cards as needed -->

    </div>

    <!-- Pagination/Load More (Example) -->
    <div class="flex justify-center mt-8">
      <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white px-6 py-3 rounded-md hover:bg-gray-400 dark:hover:bg-gray-600">Load More</button>
    </div>

  </div>
</div>

Gallery Component

A simple gallery component using Tailwind CSS, implementing a Brutalism design style with a triadic color scheme, and dark theme support for showcasing work or products.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-6">
    <h1 class="text-4xl font-bold text-green-400 mb-4">Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/400/300?random=1" alt="Gallery Image 1" class="w-full h-32 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-pink-400">Project Title 1</h2>
                <p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
                <div class="mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
                    <span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
                </div>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/400/300?random=2" alt="Gallery Image 2" class="w-full h-32 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-pink-400">Project Title 2</h2>
                <p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
                <div class="mt-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
                    <span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
                </div>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/400/300?random=3" alt="Gallery Image 3" class="w-full h-32 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-pink-400">Project Title 3</h2>
                <p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
                <div class="mt-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
                    <span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
                </div>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/400/300?random=4" alt="Gallery Image 4" class="w-full h-32 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-pink-400">Project Title 4</h2>
                <p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
                <div class="mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
                    <span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

Gallery Component

A responsive gallery component with microinteractions for social media, designed with a dark theme and a simple layout using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-4">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Gallery image 1" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-blue-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">John Doe</span>
                </div>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/201?random=2" alt="Gallery image 2" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">Jane Smith</span>
                </div>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/202?random=3" alt="Gallery image 3" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-purple-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">Michael Johnson</span>
                </div>
            </div>
        </div>
        <!-- Repeat as necessary for more images -->
    </div>
</div>

Gallery Component

Responsive Gallery Component with Dark Mode Support

Open Preview

                
<div class="bg-gray-100 dark:bg-gray-900 py-8">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Gallery</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
            <!-- Gallery Item 1 -->
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                <img src="https://picsum.photos/600/400?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p class="text-white text-xl font-semibold">Project Title 1</p>
                </div>
            </div>
            <!-- Gallery Item 2 -->
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                <img src="https://picsum.photos/600/400?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p class="text-white text-xl font-semibold">Project Title 2</p>
                </div>
            </div>
            <!-- Gallery Item 3 -->
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                <img src="https://picsum.photos/600/400?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p class="text-white text-xl font-semibold">Project Title 3</p>
                </div>
            </div>
            <!-- Gallery Item 4 -->
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                <img src="https://picsum.photos/600/400?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p class="text-white text-xl font-semibold">Project Title 4</p>
                </div>
            </div>
            <!-- Gallery Item 5 -->
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                <img src="https://picsum.photos/600/400?random=5" alt="Gallery Image 5" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p class="text-white text-xl font-semibold">Project Title 5</p>
                </div>
            </div>
            <!-- Gallery Item 6 -->
            <div class="relative overflow-hidden rounded-lg shadow-lg group">
                <img src="https://picsum.photos/600/400?random=6" alt="Gallery Image 6" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p class="text-white text-xl font-semibold">Project Title 6</p>
                </div>
            </div>
        </div>
    </div>
</div>

Categories