Componente Colonne
Un componente Columns reattivo progettato in stile brutalista con toni della terra, su misura per l'e-commerce, con complessità media e supporto per temi scuri.
Codice HTML
<div class="container mx-auto p-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 1</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 1. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$19.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 2</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 2. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$29.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 3</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 3. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$39.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 4</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 4. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$49.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 5</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 5. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$59.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 6</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 6. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$69.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente Colonne
Un componente Columns reattivo progettato con un'estetica retrò/vintage, che supporta sia temi chiari che scuri. Presenta immagini segnaposto e avatar rispettivamente da picsum.photos e randomuser.me.
Componente Colonne Brutaliste
Un componente di colonne complesso in stile brutalista, con una combinazione di colori monocromatica, adatto per il consumo di blog o contenuti. Il design presenta un contrasto elevato, layout insoliti e supporta la modalità scura.
Componente Colonne
Un componente Columns reattivo progettato con Glassmorphism, utilizzando una combinazione di colori triadica per un sito Web aziendale/aziendale. È dotato di elementi traslucidi simili al vetro smerigliato, effetti di sfocatura ed è adatto per la modalità oscura.