Componenti Schede prodotto Componente Schede prodotto

Componente Schede prodotto

Un componente di schede prodotto reattivo progettato in stile brutalista con Tailwind CSS, con supporto per temi scuri e utilizzo di immagini segnaposto.

Anteprima

Codice HTML

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/201" alt="Product Image">
      <div class="p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/202" alt="Product Image">
      <div class="p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/203" alt="Product Image">
      <div class="p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
          <p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-gray-800 {
      background-color: #2d3748;
    }
    .text-gray-600 {
      color: #a0aec0;
    }
    .border-gray-300 {
      border-color: #4a5568;
    }
  }
</style>

Componenti correlati

Componente Schede prodotto

Componente della scheda prodotto con stile Brutalismo, combinazione di colori monocromatica, livello di complessità complesso per scopi di e-commerce.

Aperto

Componente scheda lavoro analogo scheumorfico

Un componente della scheda di lavoro reattivo con uno stile di progettazione scheumorfico, che utilizza una combinazione di colori analoga, adatto per bacheche di lavoro e piattaforme di sviluppo della carriera. Include il supporto per la modalità oscura.

Aperto

Componente Schede prodotto schedembe

Componente di schede prodotto semplice e reattivo con un design scheumorfico in scala di grigi, adatto per siti web aziendali/aziendali. Include il supporto per la modalità oscura.

Aperto