Rechercher des composants

Catégories

Composants Galerie de produits

Galerie de produits

Collection d’images de produits

Composant de galerie de produits

Un composant complexe, inspiré du papier/de l’impression avec des couleurs complémentaires, conçu pour la consommation de contenu comme un blog, avec des détails riches, une réactivité et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12">

  <!-- Component Wrapper -->
  <div class="max-w-7xl mx-auto py-8 lg:py-16">

    <!-- Header Section -->
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl font-extrabold text-blue-800 dark:text-orange-300 tracking-tight leading-tight mb-4 filter drop-shadow animate-fade-in-down">
        Featured Collection
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto leading-relaxed animate-fade-in-up">
        Discover our handcrafted selections, inspired by timeless artistry and sustainable practices.
      </p>
    </div>

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

      <!-- Product Card 1 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-left">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1018/600/400" alt="Vintage Typewriter" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-red-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">New Arrival</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Whispering Keys" Typewriter</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">A beautifully restored vintage typewriter, perfect for the wordsmith in your life. Each click tells a story.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$450.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.8 (120 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 2 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-right">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1025/600/400" alt="Leather-bound Journal" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-green-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Eco-Friendly</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Explorer's" Leather Journal</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Hand-stitched leather journal with acid-free paper, perfect for thoughts, sketches, and adventures.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$85.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (230 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 3 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-fade-in-up">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1033/600/400" alt="Artisan Ceramic Mug" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-purple-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Limited Edition</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Morning Dew" Ceramic Mug</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Artisan-crafted ceramic mug, unique glaze, perfect for your morning brew or a cozy evening tea.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$45.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.7 (88 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 4 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-fade-in-down">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1040/600/400" alt="Vintage Fountain Pen" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Bestseller</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Inkwell" Fountain Pen</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Elegantly crafted fountain pen, a joy to write with, perfect for calligraphy enthusiasts and professionals.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$120.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (310 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 5 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-left">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1044/600/400" alt="Wooden Desk Organizer" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-yellow-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Handmade</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Artisan" Desk Organizer</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Solid oak desk organizer to declutter your workspace with natural elegance.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$95.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.6 (95 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 6 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-right">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1054/600/400" alt="Vintage Camera" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-teal-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Collector's Item</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Timeless Lens" Vintage Camera</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">A classic film camera, meticulously restored, ready to capture new memories with old charm.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$720.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (75 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

    </div>

    <!-- Pagination/Load More (Optional) -->
    <div class="mt-12 text-center">
      <button class="px-8 py-4 bg-blue-600 hover:bg-blue-700 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-orange-800">
        Load More Products
      </button>
    </div>

    <!-- Testimonial/Quote Section (to enhance blog/content feel) -->
    <div class="mt-20 border-t border-gray-300 dark:border-gray-700 pt-16">
      <figure class="max-w-3xl mx-auto bg-blue-50 dark:bg-gray-800 p-8 rounded-lg shadow-inner-xl shadow-gray-200/50 dark:shadow-black/20 text-center relative overflow-hidden">
        <blockquote class="text-xl md:text-2xl italic text-gray-800 dark:text-gray-200 leading-relaxed mb-6 relative z-10">
          "Every item tells a story, a testament to craftsmanship and passion. Our home feels more authentic with these timeless pieces."
        </blockquote>
        <figcaption class="flex items-center justify-center space-x-4 relative z-10">
          <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Customer Avatar" class="w-16 h-16 rounded-full border-4 border-orange-400 dark:border-blue-400 shadow-md">
          <div>
            <cite class="block text-lg font-semibold text-orange-700 dark:text-blue-300 not-italic">Eleanor Vance</cite>
            <span class="block text-gray-600 dark:text-gray-400 text-sm">Satisfied Customer</span>
          </div>
        </figcaption>
        <span class="absolute -bottom-10 -right-10 text-9xl font-serif text-blue-100 dark:text-gray-700 opacity-50 select-none">“</span>
        <span class="absolute -top-10 -left-10 text-9xl font-serif text-blue-100 dark:text-gray-700 opacity-50 select-none">”</span>
      </figure>
    </div>

  </div>

</div>

<!-- Just for demonstration purposes - Custom Styles for animations and pseudo-elements -->
<style>
  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .animate-fade-in-down { animation: fadeInDown 0.8s ease-out forwards; }
  .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
  .animate-slide-in-left { animation: fadeInLeft 0.8s ease-out forwards; }
  .animate-slide-in-right { animation: fadeInRight 0.8s ease-out forwards; }

  /* Stagger animations for better effect */
  .grid article:nth-child(1) { animation-delay: 0.1s; }
  .grid article:nth-child(2) { animation-delay: 0.2s; }
  .grid article:nth-child(3) { animation-delay: 0.3s; }
  .grid article:nth-child(4) { animation-delay: 0.4s; }
  .grid article:nth-child(5) { animation-delay: 0.5s; }
  .grid article:nth-child(6) { animation-delay: 0.6s; }

  /* Dark mode specific for testing purposes if not applying to whole page */
  /* Use 'dark' class on parent element (e.g., html or body) for actual dark mode activation */
  /* .dark .bg-gray-100 { background-color: rgb(17 24 39); } */
  /* .dark .text-gray-900 { color: rgb(229 231 235); } */
  .dark .bg-gray-850 { background-color: #2a2a2a; /* Slightly lighter than gray-900 for paper texture */ }

  /* Pseudo-elements for paper texture (optional, mostly visual flair) */
  .bg-white::before,
  .bg-white::after,
  .dark\:bg-gray-850::before,
  .dark\:bg-gray-850::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Behind content but above background */
  }
  
  .bg-white::before {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 0h3v3H0V0zm3 3h3v3H3V3z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.1;
  }

  .dark\:bg-gray-850::after {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 0h3v3H0V0zm3 3h3v3H3V3z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.1;
  }

  /* Shadow for paper-like elements */
  .shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05), inset 0 4px 6px 0 rgba(0, 0, 0, 0.03);
  }
   .dark\:shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3), inset 0 4px 6px 0 rgba(0, 0, 0, 0.2);
  }

</style>

LuxeMonochromatiqueProductGallery

Un composant de galerie de produits simple et élégant avec une palette de couleurs monochromatiques, conçu pour les plateformes musicales/audio. Dispose d’une réactivité totale et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-gray-100 py-12 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl text-center mb-12 font-serif">
      Our Exquisite Collection
    </h2>
    <div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
      <!-- Product Card 1 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/1047/500/500" alt="Luxury Headphones" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Elegance Pro Headphones</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Immersive sound, unparalleled comfort.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$499.00</p>
        </div>
      </a>

      <!-- Product Card 2 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/160/500/500" alt="Studio Microphone" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Vocalist Studio Mic</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Capture clarity with precision.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$349.00</p>
        </div>
      </a>

      <!-- Product Card 3 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/161/500/500" alt="Portable Speaker" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">AuraFlow Portable Speaker</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Sound that moves with you.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$189.00</p>
        </div>
      </a>

      <!-- Product Card 4 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/1054/500/500" alt="Vinyl Turntable" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Harmonix Vinyl Player</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Rediscover the warmth of sound.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$799.00</p>
        </div>
      </a>
    </div>
  </div>
</div>

Composant de galerie de produits

Un composant de galerie de produits réactif conçu pour les plateformes musicales et audio, avec une interface utilisateur sombre avec une palette de couleurs forêt/vert et une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-950 text-gray-100 p-4 sm:p-8 dark:bg-gray-950 dark:text-gray-100">
  <div class="max-w-7xl mx-auto py-8">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-emerald-400 mb-4 tracking-tight">Featured Albums</h2>
    <p class="text-lg sm:text-xl text-gray-400 mb-12">Explore our curated collection of new releases and timeless classics.</p>

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

      <!-- Product Card 1 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1043/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">The Serene Symphony</h3>
          <p class="text-sm text-gray-400 mb-3">Artist Name</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$12.99</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Ambient</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1044/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Echoes of the Forest</h3>
          <p class="text-sm text-gray-400 mb-3">The Green Leaves</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$14.50</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Folk</span>
            <span>2022</span>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1005/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Deep Woods Beats</h3>
          <p class="text-sm text-gray-400 mb-3">DJ Mossy</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$11.75</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Electronic</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Nature's Melody</h3>
          <p class="text-sm text-gray-400 mb-3">Calm Rivers</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$9.99</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Classical</span>
            <span>2021</span>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1040/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Undergrowth Rhythms</h3>
          <p class="text-sm text-gray-400 mb-3">The Root Band</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$13.25</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Indie</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Mystic Pond Sounds</h3>
          <p class="text-sm text-gray-400 mb-3">Aqua Echoes</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$10.50</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Chillwave</span>
            <span>2022</span>
          </div>
        </div>
      </div>

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

Composant de galerie de produits

Un composant de galerie de produits réactif avec une interface utilisateur sombre, une palette de couleurs sépia/marron, adapté aux sites Web d’entreprise. Comprend plusieurs fiches produits avec des images, des titres, des descriptions et des prix, et prend en charge le mode sombre.

Ouvrir Aperçu

                <section class="py-12 bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-extrabold text-stone-800 dark:text-stone-200 sm:text-5xl lg:text-6xl leading-tight">
        Our Premium Collection
      </h2>
      <p class="mt-4 text-xl text-stone-600 dark:text-stone-400 max-w-2xl mx-auto">
        Discover exquisitely crafted products designed with passion and precision.
      </p>
    </div>

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

      <!-- Product Card 1 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1018/600/400" alt="Product Image 1">
          <div class="absolute top-4 left-4 bg-stone-700/80 dark:bg-stone-600/80 text-stone-100 text-xs font-semibold px-3 py-1 rounded-full">New Arrival</div>
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Elegant Desk Lamp</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">A sophisticated lamp with adjustable brightness, perfect for modern workspaces.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$89.99</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1/600/400" alt="Product Image 2">
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Vintage Leather Bag</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Hand-stitched leather bag with durable hardware, ideal for daily use or travel.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$149.00</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1084/600/400" alt="Product Image 3">
          <div class="absolute top-4 right-4 bg-red-600/80 dark:bg-red-500/80 text-white text-xs font-semibold px-3 py-1 rounded-full">Sale</div>
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Ceramic Coffee Mug Set</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Artisan crafted set of four mugs, perfect for your morning brew or evening tea.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300 line-through text-lg">$45.00</span>
            <span class="text-2xl font-extrabold text-red-600 dark:text-red-500">$32.50</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1015/600/400" alt="Product Image 4">
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Botanical Wall Art</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Stunning framed print, bringing the tranquility of nature indoors.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$65.00</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/10/600/400" alt="Product Image 5">
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">High-Quality Headphones</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Experience immersive sound with active noise cancellation and ergonomic design.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$199.99</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1020/600/400" alt="Product Image 6">
          <div class="absolute top-4 left-4 bg-stone-700/80 dark:bg-stone-600/80 text-stone-100 text-xs font-semibold px-3 py-1 rounded-full">Limited Edition</div>
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Luxury Fountain Pen</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">A refined writing instrument, handcrafted for exceptional balance and smooth ink flow.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$249.00</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 7 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1005/600/400" alt="Product Image 7">
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Smart Home Assistant</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Integrate and control your smart devices with simple voice commands.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$129.00</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 8 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1021/600/400" alt="Product Image 8">
          <div class="absolute top-4 right-4 bg-emerald-600/80 dark:bg-emerald-500/80 text-white text-xs font-semibold px-3 py-1 rounded-full">In Stock</div>
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Organic Scented Candle</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Eco-friendly candle made with natural waxes and essential oils for a calming aroma.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$34.99</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

    </div>

    <div class="mt-12 text-center">
      <button class="inline-flex items-center px-8 py-3 bg-stone-700 dark:bg-stone-600 text-white font-semibold text-lg rounded-lg shadow-lg hover:bg-stone-800 dark:hover:bg-stone-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
        View All Products
        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>
</section>

Galerie de produits Cyberpunk

Un composant de galerie de produits réactif avec une esthétique cyberpunk, avec des arrière-plans sombres, des couleurs d’accent vives (bleu électrique) et des éléments interactifs subtils, adapté à la présentation de produits ou d’un portfolio.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-gray-950 text-gray-100 dark:bg-black p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white text-center mb-12 sm:mb-16 tracking-tight animate-pulse-light">
      <span class="block text-blue-400 drop-shadow-neon-blue">CYBERPUNK</span> GALLERY
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
      <!-- Product Card 1 -->
      <div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
        <img src="https://picsum.photos/id/237/800/600" alt="Product Image 1" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Quantum Holo-Display</h3>
          <p class="text-gray-300 text-sm mb-4 leading-relaxed">Sleek, transparent interface with augmented reality overlays for the ultimate digital experience.</p>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-blue-400 font-bold text-xl drop-shadow-md">€1,299.99</span>
            <button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
              View Details
            </button>
          </div>
        </div>
        <div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
        <img src="https://picsum.photos/id/238/800/600" alt="Product Image 2" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Neural Interface Chip</h3>
          <p class="text-gray-300 text-sm mb-4 leading-relaxed">Direct brain-computer connection, enhancing perception and processing speed exponentially.</p>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-blue-400 font-bold text-xl drop-shadow-md">€899.99</span>
            <button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
              View Details
            </button>
          </div>
        </div>
        <div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
        <img src="https://picsum.photos/id/239/800/600" alt="Product Image 3" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Aero-Motorcycle X-7</h3>
          <p class="text-gray-300 text-sm mb-4 leading-relaxed">Zero-emission hoverbike capable of reaching incredible speeds in urban environments.</p>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-blue-400 font-bold text-xl drop-shadow-md">€5,499.00</span>
            <button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
              View Details
            </button>
          </div>
        </div>
        <div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
      </div>

      <!-- Product Card 4 -->
      <div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
        <img src="https://picsum.photos/id/240/800/600" alt="Product Image 4" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Exo-Suit Mk-II</h3>
          <p class="text-gray-300 text-sm mb-4 leading-relaxed">Reinforced personal armor with integrated life support and tactical heads-up display.</p>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-blue-400 font-bold text-xl drop-shadow-md">€7,850.00</span>
            <button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
              View Details
            </button>
          </div>
        </div>
        <div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
      </div>

      <!-- Product Card 5 -->
      <div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
        <img src="https://picsum.photos/id/241/800/600" alt="Product Image 5" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Cyber-Optic Lenses</h3>
          <p class="text-gray-300 text-sm mb-4 leading-relaxed">Enhanced vision with zoom, night vision, and detailed data overlay capabilities.</p>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-blue-400 font-bold text-xl drop-shadow-md">€450.00</span>
            <button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
              View Details
            </button>
          </div>
        </div>
        <div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
      </div>

      <!-- Product Card 6 -->
      <div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
        <img src="https://picsum.photos/id/242/800/600" alt="Product Image 6" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Logic Processor Unit</h3>
          <p class="text-gray-300 text-sm mb-4 leading-relaxed">Compact and powerful portable computing device for on-the-go data manipulation.</p>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-blue-400 font-bold text-xl drop-shadow-md">€620.00</span>
            <button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
              View Details
            </button>
          </div>
        </div>
        <div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
      </div>

    </div>
  </div>

  <!-- Custom Styles for Neon Glow -->
  <style>
    .drop-shadow-neon-blue {
      text-shadow: 0 0 5px rgba(66, 153, 225, 0.6), 0 0 10px rgba(66, 153, 225, 0.4), 0 0 15px rgba(66, 153, 225, 0.2);
    }
    .drop-shadow-text-neon-blue {
      text-shadow: 0 0 2px rgba(66, 153, 225, 0.8), 0 0 4px rgba(66, 153, 225, 0.6);
    }
    @keyframes pulse-light {
        0%, 100% { filter: brightness(1); }
        50% { filter: brightness(1.2); }
    }
    .animate-pulse-light {
        animation: pulse-light 3s infinite alternate;
    }
  </style>
</div>

Composant de galerie de produits

Un composant de galerie de produits complexe et réactif conçu avec des micro-interactions subtiles, une palette de couleurs pastel et une prise en charge complète du mode sombre, adapté à un forum ou à une plate-forme communautaire. Comprend une sélection d’images interactive et des informations détaillées sur le produit.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-2xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="lg:grid lg:grid-cols-2 lg:gap-8 p-4 sm:p-6 lg:p-8">

      <!-- Image Gallery Section -->
      <div class="flex flex-col-reverse lg:flex-row gap-4">
        <!-- Thumbnail Navigation -->
        <div class="flex lg:flex-col gap-3 overflow-x-auto lg:overflow-y-auto pb-2 lg:pb-0 scrollbar-hide">
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-indigo-200 dark:border-indigo-600 ring-2 ring-indigo-300 dark:ring-indigo-500 cursor-pointer transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md">
            <img src="https://picsum.photos/id/1018/200/200" alt="Product thumbnail 1" class="w-full h-full object-cover">
          </div>
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
            <img src="https://picsum.photos/id/1025/200/200" alt="Product thumbnail 2" class="w-full h-full object-cover">
          </div>
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
            <img src="https://picsum.photos/id/1080/200/200" alt="Product thumbnail 3" class="w-full h-full object-cover">
          </div>
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
            <img src="https://picsum.photos/id/1043/200/200" alt="Product thumbnail 4" class="w-full h-full object-cover">
          </div>
        </div>

        <!-- Main Image -->
        <div class="flex-1 rounded-xl overflow-hidden shadow-lg border border-indigo-100 dark:border-gray-700 aspect-video lg:aspect-square flex items-center justify-center">
          <img src="https://picsum.photos/id/1018/600/600" alt="Main product image" class="w-full h-full object-cover object-center transform transition-transform duration-300 hover:scale-105">
        </div>
      </div>

      <!-- Product Details Section -->
      <div class="mt-8 lg:mt-0">
        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-3 tracking-tight leading-tight">
          Pastel Dream Headphones
        </h1>
        <p class="text-2xl font-semibold text-indigo-600 dark:text-indigo-400 mb-6">
          $199.99
        </p>

        <div class="mb-8">
          <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Description</h2>
          <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
            Experience pure audio bliss with the Pastel Dream Headphones. Designed for comfort and style, these over-ear headphones deliver rich, balanced sound with deep bass and clear trebles. Perfect for music lovers and podcast enthusiasts.
          </p>
        </div>

        <!-- Product Attributes/Features -->
        <div class="mb-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:rotate-6" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m12.728 12.728l-.707-.707M6 18H4a2 2 0 01-2-2V7a2 2 0 012-2h16a2 2 0 012 2v9a2 2 0 01-2 2h-2M18 9a2 2 0 01-2 2H8a2 2 0 01-2-2V5h12v4z"></path>
            </svg>
            <span class="font-medium text-lg">Wireless Connectivity</span>
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:scale-110" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span class="font-medium text-lg">20-Hour Battery Life</span>
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:translate-x-1" 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
            </svg>
            <span class="font-medium text-lg">Noise Cancellation</span>
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:rotate-12" 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="M14.752 11.168l-3.197 2.132A6.5 6.5 0 0012 21a6.5 6.5 0 00-4.06-11.832c.983-4.004 4.544-7 8.56-7s7.577 2.996 8.56 7A6.5 6.5 0 0012 3a6.5 6.5 0 00-4.06 11.832z"></path>
            </svg>
            <span class="font-medium text-lg">Comfort-Fit Design</span>
          </div>
        </div>

        <!-- Add to Cart (Placeholder for Forum/Community interaction) -->
        <div class="flex flex-col sm:flex-row gap-4 mb-8">
          <button class="flex-1 py-3 px-6 rounded-xl bg-indigo-500 text-white font-semibold text-lg shadow-md hover:bg-indigo-600 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-700 transition-all duration-200 transform active:scale-95 hover:scale-105">
            <span class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 -ml-1 animate-pulse" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg> Join Discussion</span>
          </button>
          <button class="flex-1 py-3 px-6 rounded-xl bg-pink-200 text-pink-700 dark:bg-pink-700 dark:text-pink-100 font-semibold text-lg shadow-md hover:bg-pink-300 dark:hover:bg-pink-600 focus:outline-none focus:ring-4 focus:ring-pink-100 dark:focus:ring-pink-800 transition-all duration-200 transform active:scale-95 hover:scale-105">
             <span class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 -ml-1" 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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> Add to Wishlist</span>
          </button>
        </div>

        <!-- Customer Reviews/Community Testimonial (Forum Focus) -->
        <div>
          <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-3">What Our Community Says:</h2>
          <div class="flex items-start bg-purple-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm group hover:shadow-md transition-all duration-200">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-purple-300 dark:ring-purple-600 mr-4 flex-shrink-0 transform transition-transform duration-300 group-hover:scale-110">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">~ MusicLover22</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">"Absolutely stunning! The sound quality is phenomenal, and they're so comfortable for long listening sessions. Plus, the pastel colors are just adorable!"</p>
              <div class="flex text-yellow-500 text-sm mt-1">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-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="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              </div>
            </div>
          </div>
        </div>

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

Composant de galerie de produits

Un composant de galerie de produits complexe et réactif avec une esthétique de conception 3D et une palette de couleurs sépia/marron, adapté aux applications technologiques/SaaS. Comprend plusieurs éléments interactifs et la prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="bg-stone-100 dark:bg-stone-900 py-12 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-stone-900 dark:text-stone-100 mb-16 relative perspective-1000" style="text-shadow: 2px 2px 5px rgba(0,0,0,0.2) dark:text-stone-100; transform-style: preserve-3d;">
      <span class="block transform rotateX-15 rotateY-5 translateZ-20 bg-clip-text text-transparent bg-gradient-to-br from-amber-800 to-amber-950 dark:from-amber-600 dark:to-amber-900">Our Showcase</span>
      <span class="block text-2xl sm:text-3xl text-stone-700 dark:text-stone-300 mt-4 font-normal tracking-wide transform rotateX-10 translateZ-10">Explore Solutions with Depth</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">

      <!-- Product Card 1 -->
      <div class="group w-full max-w-sm rounded-xl overflow-hidden shadow-xl hover:shadow-2xl dark:shadow-stone-700/50 dark:hover:shadow-stone-600/70 transition-all duration-500 transform hover:scale-102 hover:rotate-3 hover:skew-y-1 relative bg-gradient-to-br from-stone-200 to-stone-100 dark:from-stone-800 dark:to-stone-900 border border-stone-300 dark:border-stone-700 perspective-1000">
        <div class="relative p-6 pt-10 pb-20 rounded-xl transform-style-preserve-3d backface-hidden group-hover:rotate-y-10 group-hover:rotate-x-5 transition-transform duration-500">
          <div class="absolute inset-0 bg-no-repeat bg-center opacity-5 dark:opacity-10" style="background-image: url('https://picsum.photos/id/60/300/200'); background-size: cover; filter: grayscale(100%) brightness(50%) sepia(100%);">
          </div>
          <div class="relative z-10">
            <img src="https://picsum.photos/id/1015/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-6 shadow-md dark:shadow-none hover:shadow-lg transition-shadow duration-300 transform translateZ-20 perspective-1000">
            <h3 class="text-2xl font-bold text-amber-950 dark:text-amber-500 mb-3 transform translateZ-10">Data Insight Engine</h3>
            <p class="text-stone-800 dark:text-stone-300 text-base mb-6 transform translateZ-5">
              Uncover hidden patterns and make data-driven decisions with unparalleled precision and speed.
            </p>
            <div class="flex justify-between items-center transform translateZ-15">
              <span class="text-lg font-semibold text-amber-800 dark:text-amber-400">$499/mo</span>
              <a href="#" class="inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-stone-100 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 transform translateZ-10 perspective-1000 group-hover:translateZ-20">
                Learn More
                <svg class="ml-2 -mr-1 w-5 h-5 group-hover:rotate-z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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><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"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="group w-full max-w-sm rounded-xl overflow-hidden shadow-xl hover:shadow-2xl dark:shadow-stone-700/50 dark:hover:shadow-stone-600/70 transition-all duration-500 transform hover:scale-102 hover:-rotate-3 hover:-skew-y-1 relative bg-gradient-to-br from-stone-200 to-stone-100 dark:from-stone-800 dark:to-stone-900 border border-stone-300 dark:border-stone-700 perspective-1000">
        <div class="relative p-6 pt-10 pb-20 rounded-xl transform-style-preserve-3d backface-hidden group-hover:rotate-y-10 group-hover:rotate-x-5 transition-transform duration-500">
          <div class="absolute inset-0 bg-no-repeat bg-center opacity-5 dark:opacity-10" style="background-image: url('https://picsum.photos/id/61/300/200'); background-size: cover; filter: grayscale(100%) brightness(50%) sepia(100%);">
          </div>
          <div class="relative z-10">
            <img src="https://picsum.photos/id/1018/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-6 shadow-md dark:shadow-none hover:shadow-lg transition-shadow duration-300 transform translateZ-20 perspective-1000">
            <h3 class="text-2xl font-bold text-amber-950 dark:text-amber-500 mb-3 transform translateZ-10">Cloud Security Hub</h3>
            <p class="text-stone-800 dark:text-stone-300 text-base mb-6 transform translateZ-5">
              Protect your cloud infrastructure with advanced threat detection and real-time monitoring.
            </p>
            <div class="flex justify-between items-center transform translateZ-15">
              <span class="text-lg font-semibold text-amber-800 dark:text-amber-400">$799/mo</span>
              <a href="#" class="inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-stone-100 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 transform translateZ-10 perspective-1000 group-hover:translateZ-20">
                Learn More
                <svg class="ml-2 -mr-1 w-5 h-5 group-hover:rotate-z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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><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"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="group w-full max-w-sm rounded-xl overflow-hidden shadow-xl hover:shadow-2xl dark:shadow-stone-700/50 dark:hover:shadow-stone-600/70 transition-all duration-500 transform hover:scale-102 hover:rotate-3 hover:skew-y-1 relative bg-gradient-to-br from-stone-200 to-stone-100 dark:from-stone-800 dark:to-stone-900 border border-stone-300 dark:border-stone-700 perspective-1000">
        <div class="relative p-6 pt-10 pb-20 rounded-xl transform-style-preserve-3d backface-hidden group-hover:rotate-y-10 group-hover:rotate-x-5 transition-transform duration-500">
          <div class="absolute inset-0 bg-no-repeat bg-center opacity-5 dark:opacity-10" style="background-image: url('https://picsum.photos/id/62/300/200'); background-size: cover; filter: grayscale(100%) brightness(50%) sepia(100%);">
          </div>
          <div class="relative z-10">
            <img src="https://picsum.photos/id/1025/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-6 shadow-md dark:shadow-none hover:shadow-lg transition-shadow duration-300 transform translateZ-20 perspective-1000">
            <h3 class="text-2xl font-bold text-amber-950 dark:text-amber-500 mb-3 transform translateZ-10">Enhanced Workflow Automation</h3>
            <p class="text-stone-800 dark:text-stone-300 text-base mb-6 transform translateZ-5">
              Streamline operations and boost team productivity with intelligent automation solutions.
            </p>
            <div class="flex justify-between items-center transform translateZ-15">
              <span class="text-lg font-semibold text-amber-800 dark:text-amber-400">$599/mo</span>
              <a href="#" class="inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-stone-100 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 transform translateZ-10 perspective-1000 group-hover:translateZ-20">
                Learn More
                <svg class="ml-2 -mr-1 w-5 h-5 group-hover:rotate-z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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><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"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Testimonial / Featured Clients Section -->
    <div class="mt-20 text-center">
      <h3 class="text-3xl font-bold text-stone-900 dark:text-stone-100 mb-8">Trusted by Industry Leaders</h3>
      <div class="flex flex-wrap justify-center items-center gap-8 md:gap-12">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303657/microsoft-logo-2012-text.svg" alt="Client Logo 1">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303490/google-1.svg" alt="Client Logo 2">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303273/apple.svg" alt="Client Logo 3">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303102/amazon-2-logo.svg" alt="Client Logo 4">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303681/meta.svg" alt="Client Logo 5">
      </div>
    </div>

  </div>
</section>

<style>
  /* Custom perspective for 3D effects */
  .perspective-1000 {
    perspective: 1000px;
  }

  /* Tailwind does not have transform-style: preserve-3d, so adding it */
  .transform-style-preserve-3d {
    transform-style: preserve-3d;
  }

  /* Tailwind does not have backface-visibility: hidden, so adding it */
  .backface-hidden {
    backface-visibility: hidden;
  }

  /* Custom 3D transforms for interactivity */
  .group:hover .rotate-y-10 {
    transform: rotateY(10deg);
  }
  .group:hover .rotate-x-5 {
    transform: rotateX(5deg);
  }
  .group:hover .rotate-z-10 {
    transform: rotateZ(10deg);
  }

  .transform-rotateX-15 {
    transform: rotateX(15deg);
  }
  .transform-rotateY-5 {
    transform: rotateY(5deg);
  }
  .transform-translateZ-20 {
    transform: translateZ(20px);
  }
  .transform-translateZ-10 {
    transform: translateZ(10px);
  }
  .transform-translateZ-5 {
    transform: translateZ(5px);
  }
  .transform-r-translateZ-20 {
    transform: translateZ(-20px);
  }

  @media (min-width: 1024px) {
    .group:hover .group-hover\\:translateZ-20 {
      transform: translateZ(20px);
    }
  }
</style>

Composant de galerie de produits

Un composant de galerie de produits réactif avec un design inspiré du papier/de l’impression, une palette de couleurs neutres chaudes et une prise en charge du mode sombre, adapté aux plates-formes de divertissement/médias.

Ouvrir Aperçu

                <div class="p-4 sm:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl font-bold text-center mb-12 relative text-stone-800 dark:text-stone-200 leading-tight tracking-tight">
      Featured Releases
      <span class="block w-24 h-1.5 bg-yellow-600 dark:bg-yellow-400 mx-auto mt-4 rounded-full"></span>
    </h2>

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

      <!-- Product Card 1 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/1025/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">The Echoing Abyss</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">Immerse yourself in a gripping narrative of mystery and suspense. A true cinematic masterpiece.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$19.99</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            View Details
          </button>
        </div>
        <div class="absolute top-0 right-0 p-2 bg-yellow-600 dark:bg-yellow-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
          New
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/1018/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Whispers of the Stars</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">An epic journey through cosmic wonders and ancient prophecies. Visually stunning!</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$24.99</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            Pre-order Now
          </button>
        </div>
        <div class="absolute top-0 right-0 p-2 bg-purple-600 dark:bg-purple-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
          Pre-order
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/10/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Lost in the Glitch</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">A mind-bending sci-fi thriller exploring virtual realities and forgotten memories.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$16.50</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/1060/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Chronicles of Eldoria</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">A classic fantasy adventure, now remastered in breathtaking 4K UHD. Limited Edition!</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$29.99</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            Buy Now
          </button>
        </div>
        <div class="absolute top-0 right-0 p-2 bg-red-600 dark:bg-red-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
          Limited
        </div>
      </div>

    </div>

    <div class="mt-16 text-center">
      <button class="px-8 py-4 bg-yellow-600 hover:bg-yellow-700 text-white text-lg font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-400">
        Explore All Products
      </button>
    </div>

  </div>
</div>

<style>
/* Simple 'paper curl' effect for cards (optional, for visual flair) */
.print-effect {
  position: relative;
  /* filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1)); */
}

.print-effect::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 5%;
  width: 90%;
  height: 10px;
  background: rgba(0,0,0,0.05);
  border-radius: 50%;
  filter: blur(4px);
  z-index: -1;
  transition: transform 0.3s ease-out;
}

.print-effect:hover::before {
  transform: scale(1.05);
  background: rgba(0,0,0,0.1);
}

/* Custom animation for badges */
@keyframes pulse-once {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-pulse-once {
  animation: pulse-once 1.2s ease-out 1;
}
</style>

Composant de galerie de produits

Un composant de galerie de produits simple et réactif avec un style de conception glassmorphism, une palette de couleurs noir et blanc avec un accent vif, adapté aux sites d’emploi ou aux plateformes de carrière. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto py-8">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">
      Featured Opportunities
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card 1 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job1/600/400" alt="Software Engineer Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Senior Software Engineer
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Acme Corp</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            We are looking for an experienced Software Engineer to join our growing team. You will be responsible for designing and developing high-quality software solutions.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Full-time</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Remote</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job2/600/400" alt="Marketing Manager Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Digital Marketing Manager
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Global Solutions Inc.</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Join our dynamic marketing team and lead our digital strategy. We need someone passionate about driving online growth and brand awareness.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Hybrid</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> New York, USA</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job3/600/400" alt="UX Designer Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            UX/UI Designer
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Creative Minds Studio</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Shape user experiences with us! We're seeking a talented UX/UI Designer to craft intuitive and beautiful interfaces.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Full-time</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> London, UK</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job4/600/400" alt="Data Scientist Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Data Scientist
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Data Insights Co.</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Unlock insights from complex data sets. We are looking for a Data Scientist to build predictive models and analyze trends.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Remote</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Anywhere</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job5/600/400" alt="Project Manager Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Project Manager
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Innovate Solutions LLC</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Oversee key projects from conception to completion. We need a meticulous Project Manager with excellent organizational skills.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Full-time</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Berlin, DE</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job6/600/400" alt="Content Writer Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Senior Content Writer
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Content Hub</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Craft compelling stories and engage audiences. We are seeking a creative Senior Content Writer to elevate our brand messaging.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Part-time</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Online</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Brutalist_RealEstate_Product_Gallery

Il s’agit d’un composant complexe de galerie de produits de style brutaliste pour les annonces immobilières, avec des tons de bijoux, des couleurs saturées riches, un contraste élevé et la prise en charge du mode sombre. Conçu pour afficher les détails de la propriété avec plusieurs éléments interactifs.

Ouvrir Aperçu

                <div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 antialiased">

  <!-- Section Header -->
  <div class="mb-8 md:mb-12 border-b-4 border-l-4 border-emerald-700 dark:border-red-700 p-4 bg-emerald-100 dark:bg-stone-800">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold uppercase tracking-tight text-emerald-900 dark:text-red-600 mb-2 leading-none">
      Hot Property Listings
    </h1>
    <p class="text-lg sm:text-xl md:text-2xl font-semibold text-emerald-800 dark:text-red-400">
      Explore our brutalist collection of available properties.
    </p>
  </div>

  <!-- Product Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12">

    <!-- Property Card 1 -->
    <div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-red-700 dark:border-emerald-700 shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] dark:shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)]">
      <div class="absolute top-0 left-0 bg-red-700 dark:bg-emerald-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider -translate-x-2 -translate-y-2 rotate-3 hover:rotate-0 transition-transform">FEATURED</div>
      <img src="https://picsum.photos/id/1018/600/400" alt="Modern Apartment Building" class="w-full h-64 object-cover border-b-4 border-red-700 dark:border-emerald-700">
      <div class="p-6">
        <h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-emerald-900 dark:text-emerald-500 mb-2 border-b-2 border-red-500 pb-2">Urban Loft Residence</h2>
        <p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">A striking, industrial-inspired loft in the heart of downtown. Concrete finishes and exposed ductwork provide a raw, authentic living experience.</p>
        
        <div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
          <div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">&#x2611;</span> 3 Beds</div>
          <div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">&#x2611;</span> 2 Baths</div>
          <div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">&#x2611;</span> 1,800 sqft</div>
          <div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">&#x2611;</span> Built 1978</div>
        </div>

        <div class="flex items-baseline justify-between mb-6 border-t-2 border-red-500 pt-4">
          <span class="text-4xl sm:text-5xl font-extrabold text-red-700 dark:text-red-400">$850K</span>
          <span class="text-xl font-bold text-emerald-700 dark:text-emerald-400">Negotiable</span>
        </div>

        <div class="flex flex-col sm:flex-row gap-4">
          <button class="flex-1 bg-emerald-700 dark:bg-ruby-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-emerald-900 dark:hover:bg-ruby-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            View Details
          </button>
          <button class="flex-none bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            Call Agent
          </button>
        </div>

        <div class="mt-6 pt-4 border-t-2 border-emerald-500 flex items-center justify-between">
          <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-red-700 dark:border-slate-300 mr-3">
            <div>
              <p class="text-sm font-semibold text-emerald-800 dark:text-emerald-300">Agent: John Smith</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Available 24/7</p>
            </div>
          </div>
          <a href="#" class="text-sm font-bold text-emerald-700 dark:text-emerald-400 hover:underline border-b-2 border-transparent hover:border-emerald-700 dark:hover:border-emerald-400 transition-colors">Message</a>
        </div>
      </div>
    </div>

    <!-- Property Card 2 -->
    <div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-emerald-700 dark:border-red-700 shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] dark:shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)]">
      <div class="absolute top-0 right-0 bg-emerald-700 dark:bg-red-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider translate-x-2 -translate-y-2 -rotate-3 hover:rotate-0 transition-transform">NEW LISTING</div>
      <img src="https://picsum.photos/id/1041/600/400" alt="Scenic Countryside Home" class="w-full h-64 object-cover border-b-4 border-emerald-700 dark:border-red-700">
      <div class="p-6">
        <h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-red-900 dark:text-red-500 mb-2 border-b-2 border-emerald-500 pb-2">Brutalist Countryside Retreat</h2>
        <p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">An unapologetic concrete masterpiece nestled in serene landscapes. Stripped-back design meets rural tranquility, offering profound escapism.</p>
        
        <div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
          <div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">&#x2611;</span> 4 Beds</div>
          <div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">&#x2611;</span> 3 Baths</div>
          <div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">&#x2611;</span> 2,500 sqft</div>
          <div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">&#x2611;</span> Built 2005</div>
        </div>

        <div class="flex items-baseline justify-between mb-6 border-t-2 border-emerald-500 pt-4">
          <span class="text-4xl sm:text-5xl font-extrabold text-emerald-700 dark:text-emerald-400">$1.2M</span>
          <span class="text-xl font-bold text-red-700 dark:text-red-400">Fixed Price</span>
        </div>

        <div class="flex flex-col sm:flex-row gap-4">
          <button class="flex-1 bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            View Details
          </button>
          <button class="flex-none bg-emerald-700 dark:bg-ruby-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-emerald-900 dark:hover:bg-ruby-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            Call Agent
          </button>
        </div>

        <div class="mt-6 pt-4 border-t-2 border-red-500 flex items-center justify-between">
          <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-emerald-700 dark:border-slate-300 mr-3">
            <div>
              <p class="text-sm font-semibold text-red-800 dark:text-red-300">Agent: Jane Doe</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Response time: 1hr</p>
            </div>
          </div>
          <a href="#" class="text-sm font-bold text-red-700 dark:text-red-400 hover:underline border-b-2 border-transparent hover:border-red-700 dark:hover:border-red-400 transition-colors">Message</a>
        </div>
      </div>
    </div>

    <!-- Property Card 3 -->
    <div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-sapphire-700 dark:border-emerald-700 shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] dark:shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)]">
      <div class="absolute top-0 left-0 bg-sapphire-700 dark:bg-emerald-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider -translate-x-2 -translate-y-2 rotate-3 hover:rotate-0 transition-transform">PREMIUM</div>
      <img src="https://picsum.photos/id/1050/600/400" alt="Commercial Space" class="w-full h-64 object-cover border-b-4 border-sapphire-700 dark:border-emerald-700">
      <div class="p-6">
        <h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-sapphire-900 dark:text-sapphire-500 mb-2 border-b-2 border-red-500 pb-2">Commercial Block B</h2>
        <p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">A robust, imposing commercial building ready for redevelopment. Massive potential with a no-nonsense, concrete structure.</p>
        
        <div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
          <div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">&#x2611;</span> 5 Floors</div>
          <div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">&#x2611;</span> 10 Offices</div>
          <div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">&#x2611;</span> 10,000 sqft</div>
          <div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">&#x2611;</span> Built 1960</div>
        </div>

        <div class="flex items-baseline justify-between mb-6 border-t-2 border-red-500 pt-4">
          <span class="text-4xl sm:text-5xl font-extrabold text-red-700 dark:text-red-400">$3.5M</span>
          <span class="text-xl font-bold text-sapphire-700 dark:text-sapphire-400">Offer Welcome</span>
        </div>

        <div class="flex flex-col sm:flex-row gap-4">
          <button class="flex-1 bg-sapphire-700 dark:bg-emerald-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-sapphire-900 dark:hover:bg-emerald-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            View Details
          </button>
          <button class="flex-none bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            Call Agent
          </button>
        </div>

        <div class="mt-6 pt-4 border-t-2 border-sapphire-500 flex items-center justify-between">
          <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-sapphire-700 dark:border-slate-300 mr-3">
            <div>
              <p class="text-sm font-semibold text-sapphire-800 dark:text-sapphire-300">Agent: Mike Ross</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Key Holder</p>
            </div>
          </div>
          <a href="#" class="text-sm font-bold text-sapphire-700 dark:text-sapphire-400 hover:underline border-b-2 border-transparent hover:border-sapphire-700 dark:hover:border-sapphire-400 transition-colors">Message</a>
        </div>
      </div>
    </div>

  </div>

  <!-- Call to action/Footer space -->
  <div class="mt-12 md:mt-16 text-center border-t-4 border-r-4 border-emerald-700 dark:border-red-700 p-6 bg-emerald-100 dark:bg-stone-800">
    <p class="text-xl sm:text-2xl font-bold uppercase text-emerald-900 dark:text-red-500 mb-4">Ready to find your brutalist dream?</p>
    <button class="inline-block bg-red-700 dark:bg-sapphire-700 text-stone-50 px-8 py-4 text-xl font-bold uppercase border-4 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)]">
      Browse All Properties
    </button>
  </div>

  <!-- Custom Colors for Brutalism Jewel Tones -->
  <style>
    .dark .bg-ruby-700 { background-color: rgb(150, 40, 60); } /* Darker Ruby */
    .dark .hover\:bg-ruby-900:hover { background-color: rgb(110, 20, 40); } /* Even darker Ruby */
    .dark .bg-sapphire-700 { background-color: rgb(60, 80, 150); } /* Darker Sapphire */
    .dark .hover\:bg-sapphire-900:hover { background-color: rgb(40, 60, 110); } /* Even darker Sapphire */
    .text-emerald-900 { color: rgb(0, 50, 20); } /* Darker Emerald */
    .text-red-900 { color: rgb(70, 0, 0); } /* Darker Red */
    .text-sapphire-900 { color: rgb(0, 0, 40); } /* Darker Sapphire */

    /* Light mode custom colors */
    .bg-emerald-700 { background-color: rgb(5, 150, 105); } /* Emerald Green */
    .hover\:bg-emerald-900:hover { background-color: rgb(4, 120, 85); } /* Darker Emerald for hover */
    .border-emerald-700 { border-color: rgb(5, 150, 105); } /* Emerald Border */
    .text-emerald-700 { color: rgb(5, 150, 105); } /* Emerald Text */
    .text-emerald-800 { color: rgb(4, 130, 95); } /* Slightly darker Emerald Text */
    .text-emerald-900 { color: rgb(3, 100, 75); } /* Even darker Emerald Text */
    .border-emerald-500 { border-color: rgb(6, 175, 125); } /* Lighter Emerald Border */
    .text-emerald-400 { color: rgb(4, 185, 130); } /* Lighter Emerald Text */
    .text-emerald-300 { color: rgb(5, 200, 140); } /* Even lighter Emerald Text */

    .bg-red-700 { background-color: rgb(220, 38, 38); } /* Ruby Red */
    .hover\:bg-red-900:hover { background-color: rgb(180, 30, 30); } /* Darker Ruby for hover */
    .border-red-700 { border-color: rgb(220, 38, 38); } /* Ruby Border */
    .text-red-700 { color: rgb(220, 38, 38); } /* Ruby Text */
    .text-red-800 { color: rgb(190, 35, 35); } /* Slightly darker Ruby Text */
    .text-red-900 { color: rgb(150, 30, 30); } /* Even darker Ruby Text */
    .border-red-500 { border-color: rgb(239, 68, 68); } /* Lighter Ruby Border */
    .text-red-400 { color: rgb(248, 113, 113); } /* Lighter Ruby Text */
    .text-red-300 { color: rgb(252, 165, 165); } /* Even lighter Ruby Text */

    .bg-sapphire-700 { background-color: rgb(37, 99, 235); } /* Sapphire Blue */
    .hover\:bg-sapphire-900:hover { background-color: rgb(29, 78, 216); } /* Darker Sapphire for hover */
    .border-sapphire-700 { border-color: rgb(37, 99, 235); } /* Sapphire Border */
    .text-sapphire-700 { color: rgb(37, 99, 235); } /* Sapphire Text */
    .text-sapphire-800 { color: rgb(30, 80, 190); } /* Slightly darker Sapphire Text */
    .text-sapphire-900 { color: rgb(20, 60, 150); } /* Even darker Sapphire Text */
    .border-sapphire-500 { border-color: rgb(59, 130, 246); } /* Lighter Sapphire Border */
    .text-sapphire-400 { color: rgb(96, 165, 250); } /* Lighter Sapphire Text */
    .text-sapphire-300 { color: rgb(147, 197, 253); } /* Even lighter Sapphire Text */

  </style>
</div>