Cerca componenti

Categorie

Componenti Galleria prodotti

Galleria prodotti

Raccolta di immagini dei prodotti

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 Anteprima

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="max-w-4xl w-full">
        <h2 class="text-2xl font-bold text-center mb-6 dark:text-white">Product Gallery</h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=1" alt="Product 1" 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-400">Description of product 1 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By John Doe</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=2" alt="Product 2" 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-400">Description of product 2 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Jane Smith</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=3" alt="Product 3" 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-400">Description of product 3 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Mike Johnson</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=4" alt="Product 4" 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-400">Description of product 4 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Sarah Connor</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

ProductGalleryComponent

Galleria prodotti Componente con design brutalista, supporto per modalità reattiva e scura.

Aperto Anteprima

                <section class="text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=1">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">The Catalyzer</h2>
          <p class="mt-1">$16.00</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=2">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
          <p class="mt-1">$21.15</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=3">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">Neptune</h2>
          <p class="mt-1">$12.00</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=4">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">The 400 Blows</h2>
          <p class="mt-1">$18.40</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=5">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">The Catalyzer</h2>
          <p class="mt-1">$16.00</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=6">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
          <p class="mt-1">$21.15</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=7">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">Neptune</h2>
          <p class="mt-1">$12.00</p>
        </div>
      </div>
      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
        <a class="block relative h-48 rounded overflow-hidden">
          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://picsum.photos/420/260?random=8">
        </a>
        <div class="mt-4">
          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
          <h2 class="text-gray-900 title-font text-lg font-medium">The 400 Blows</h2>
          <p class="mt-1">$18.40</p>
        </div>
      </div>
    </div>
  </div>
  <style>
    .text-gray-600 {
      --tw-text-opacity: 1;
      color: rgba(75, 85, 99, var(--tw-text-opacity));
    }
    .body-font {
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
    .container {
      width: 100%;
      margin-right: auto;
      margin-left: auto;
    }
    .px-5 {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .py-24 {
      padding-top: 6rem;
      padding-bottom: 6rem;
    }
    .mx-auto {
      margin-left: auto;
      margin-right: auto;
    }
    .flex {
      display: flex;
    }
    .flex-wrap {
      flex-wrap: wrap;
    }
    .-m-4 {
      margin: -1rem;
    }
    .lg\:w-1\/4 {
      width: 25%;
    }
    .md\:w-1\/2 {
      width: 50%;
    }
    .p-4 {
      padding: 1rem;
    }
    .w-full {
      width: 100%;
    }
    .block {
      display: block;
    }
    .relative {
      position: relative;
    }
    .h-48 {
      height: 12rem;
    }
    .rounded {
      border-radius: 0.25rem;
    }
    .overflow-hidden {
      overflow: hidden;
    }
    .object-cover {
      object-fit: cover;
    }
    .object-center {
      object-position: center;
    }
    .mt-4 {
      margin-top: 1rem;
    }
    .text-gray-500 {
      --tw-text-opacity: 1;
      color: rgba(107, 114, 128, var(--tw-text-opacity));
    }
    .text-xs {
      font-size: 0.75rem;
      line-height: 1rem;
    }
    .tracking-widest {
      letter-spacing: 0.1em;
    }
    .title-font {
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
    .mb-1 {
      margin-bottom: 0.25rem;
    }
    .text-gray-900 {
      --tw-text-opacity: 1;
      color: rgba(17, 24, 39, var(--tw-text-opacity));
    }
    .text-lg {
      font-size: 1.125rem;
      line-height: 1.75rem;
    }
    .font-medium {
      font-weight: 500;
    }
    .mt-1 {
      margin-top: 0.25rem;
    }
    @media (min-width: 768px) {
      .md\:-m-4 {
        margin: -1rem;
      }
      .md\:p-4 {
        padding: 1rem;
      }
    }
    @media (min-width: 1024px) {
      .lg\:-m-4 {
        margin: -1rem;
      }
      .lg\:p-4 {
        padding: 1rem;
      }
    }
    /* Brutalism Styles - Example */
    .text-gray-600 {
      color: black;
    }
    .text-gray-900 {
      color: black;
    }
    .text-gray-500 {
      color: black;
    }
    .border {
      border: 2px solid black;
    }
    .rounded {
      border-radius: 0;
    }
    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
      .dark\:text-white {
        color: white;
      }
      .dark\:text-gray-300 {
        color: #d1d5db;
      }
      .dark\:bg-black {
        background-color: black;
      }
      .dark\:border-white {
        border-color: white;
      }
    }
    body {
        background-color: white;
        color: black;
    }
    @media (prefers-color-scheme: dark) {
      body {
        background-color: black;
        color: white;
      }
       .text-gray-600, .text-gray-900, .text-gray-500 {
        color: white;
      }
      .border {
        border-color: white;
      }
    }
  </style>
</section>

Componente della galleria dei prodotti

Componente basato sui principi del Material Design, con design reattivo e supporto per temi scuri. Include immagini segnaposto.

Aperto Anteprima

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product1/500/300" alt="Product Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$19.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product2/500/300" alt="Product Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$29.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product3/500/300" alt="Product Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$39.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
     <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product4/500/300" alt="Product Image 4" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$49.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

Componente della galleria dei prodotti

Un componente della galleria di prodotti con microinterazioni.

Aperto Anteprima

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

Componente della galleria dei prodotti

Componente della galleria dei prodotti Glassmorphism con effetti reattivi e supporto per temi scuri.

Aperto Anteprima

                <div class="container mx-auto px-4 py-8">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
    </div>
    </div>
  </div>
</div>