Componenti Galleria prodotti Componente della galleria dei prodotti
Componente della galleria dei prodotti

Un componente reattivo della galleria di prodotti con un'interfaccia utente scura, combinazione di colori seppia/marrone, adatto per siti Web aziendali/aziendali. Include più schede prodotto con immagini, titoli, descrizioni e prezzi e supporta la modalità scura.
Anteprima

Codice HTML

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

Componente della galleria dei prodotti

Un componente della galleria di prodotti progettato in stile Material Design con una combinazione di colori triadica. È dotato di layout basati su griglia, animazioni reattive e supporta il tema scuro. La galleria include immagini e avatar ed è adatta per una dashboard.
Aperto
Componente della galleria dei prodotti

Un componente della galleria di prodotti reattivo che mostra articoli con microinterazioni coinvolgenti e un focus sui toni della terra.
Aperto
Componente della galleria dei prodotti

Un componente reattivo della galleria di prodotti con lo stile di design Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e supporto per temi scuri. Mostra le immagini dei prodotti e gli avatar degli utenti.
Aperto