Galleria prodotti

Componente della galleria dei prodotti

Un componente responsive della galleria prodotti con un'estetica Material Design, caratterizzato da un layout basato su griglia ed elementi interattivi adatti per mostrare prodotti o un portfolio. Include il supporto per la modalità oscura e utilizza una combinazione di colori analoga.

Apri anteprima

                <div class="container mx-auto p-4"">
  <!-- Product Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$49.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$29.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$79.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$19.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>
  </div>
</div>

Componente della galleria dei prodotti

Un componente reattivo della galleria di prodotti con un design scheumorfico, una combinazione di colori monocromatica e il supporto per temi scuri, creato con Tailwind CSS. Presenta un layout semplice adatto ai blog e al consumo di contenuti, imitando gli elementi del mondo reale con ombre e sfumature sottili.

Apri anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans">
  <div class="container max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 border-gray-200 dark:border-gray-700 border-b-8 border-r-4 transition-all duration-300 ease-in-out">
    <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center tracking-tight drop-shadow-md">Our Gallery</h1>

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

      <!-- Product Card 1 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Vintage Camera</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">A classic camera with a modern touch, perfect for capturing timeless moments.</p>
        <span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$299</span>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Leather Journal</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Handcrafted leather journal for your thoughts and creative expressions.</p>
        <span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$45</span>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Classic Turntable</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Experience the warm, rich sound of vinyl with this elegant turntable.</p>
        <span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$549</span>
      </div>

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

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.

Apri anteprima

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Product Gallery</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover" />
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover" />
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover" />
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 3</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
      </div>
    </div>
  </div>

  <div class="mt-6">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
    <div class="flex items-center mt-2">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-2" />
      <div>
        <strong class="text-gray-700 dark:text-gray-300">John Doe</strong>
        <p class="text-gray-600 dark:text-gray-400">Great product! Really enjoyed using it.</p>
      </div>
    </div>
  </div>
</div>

Componente della galleria dei prodotti

Componente della galleria prodotti reattivo con supporto per la modalità scura

Apri anteprima

                <div class="dark:bg-gray-900">
  <div class="container mx-auto py-8 px-4">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-8">Our Products</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 1</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-teal-500">$99.99</span>
            <button class="bg-teal-500 text-white px-4 py-2 rounded hover:bg-teal-600">View Details</button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 2</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-orange-500">$149.50</span>
            <button class="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">View Details</button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 3</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-purple-500">$199.00</span>
            <button class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600">View Details</button>
          </div>
        </div>
      </div>

       <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 4</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-pink-500">$75.50</span>
            <button class="bg-pink-500 text-white px-4 py-2 rounded hover:bg-pink-600">View Details</button>
          </div>
        </div>
      </div>

       <!-- Product Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product5/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 5</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-green-500">$120.00</span>
            <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">View Details</button>
          </div>
        </div>
      </div>

       <!-- Product Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product6/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 6</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-red-500">$250.80</span>
            <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">View Details</button>
          </div>
        </div>
      </div>

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

Componente della galleria dei prodotti

Un componente reattivo della Galleria prodotti progettato con Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e una combinazione di colori complementari. Include più elementi interattivi adatti per l'e-commerce con supporto per la modalità scura.

Apri anteprima

                <div class="bg-gray-800 dark:bg-gray-900 min-h-screen p-6 flex flex-col items-center justify-center">
    <h1 class="text-2xl font-bold text-white mb-6">Product Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/200" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 1</h2>
            <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/201" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 2</h2>
            <p class="text-gray-600 dark:text-gray-300">$39.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/202" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 3</h2>
            <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/203" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 4</h2>
            <p class="text-gray-600 dark:text-gray-300">$59.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
    </div>
    <div class="mt-10 flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
    </div>
</div>

Componente della galleria dei prodotti

Componente della galleria prodotti reattivo con modalità scura

Apri anteprima

                <div class="bg-gray-900 py-10">
  <div class="container mx-auto px-4">
    <h2 class="text-pastel-light mb-8 text-3xl font-bold text-center">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product 1" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 1</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 1.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product 2" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 2</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 2.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product 3" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 3</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 3.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
    </div>
  </div>
</div>

Componente della galleria dei prodotti

Un semplice componente reattivo della galleria di prodotti progettato con i principi del Material Design, con colori vivaci e supporto per la modalità scura, adatto per un cruscotto. Questo componente utilizza Tailwind CSS per lo stile.

Apri anteprima

                <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full mt-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 5</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 6</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
        </div>
    </div>
</div>

Componente della galleria dei prodotti

Un componente reattivo della galleria di prodotti progettato con i principi del Material Design, con colori color terra, adatto per i cruscotti e che supporta la modalità scura.

Apri anteprima

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 1</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 2</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/202" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 3</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
</div>

Componente della galleria dei prodotti

Un componente della galleria di prodotti reattivo progettato con uno stile neumorfismo e una combinazione di colori triadica, adatto per mostrare lavori o prodotti, con supporto per temi scuri.

Apri anteprima

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Product Gallery</h2>  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1012/300/200" alt="Product 1" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1013/300/200" alt="Product 2" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/women/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1014/300/200" alt="Product 3" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1015/300/200" alt="Product 4" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 4</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>  </div></div>

Componente della galleria dei prodotti

Un componente reattivo della galleria di prodotti che utilizza Tailwind CSS con uno stile di design neumorfico, una combinazione di colori complementari e un layout complesso adatto per i siti Web aziendali. Include il supporto per la modalità oscura e utilizza immagini da picsum.photos.

Apri anteprima

                <div class="container mx-auto p-10 bg-gray-200 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10">
    <!-- Product Card 1 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 1</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$99.99</span>
        <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 2</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-green-600 dark:text-green-400">$149.99</span>
        <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 3</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-red-600 dark:text-red-400">$199.99</span>
        <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image 4" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 4</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-purple-600 dark:text-purple-400">$249.99</span>
        <button class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>
     <!-- Product Card 5 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product5/400/300" alt="Product Image 5" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 5</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-yellow-600 dark:text-yellow-400">$299.99</span>
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>
     <!-- Product Card 6 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product6/400/300" alt="Product Image 6" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 6</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-teal-600 dark:text-teal-400">$349.99</span>
        <button class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom Neumorphic Shadows */
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #454545, -7px -7px 15px #b3b3b3;
  }
  .shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #454545, inset -5px -5px 10px #b3b3b3;
  }
</style>

Categorie