Componente contenitore
Un componente contenitore progettato in stile brutalista per l'e-commerce, caratterizzato da un layout reattivo con supporto per il tema scuro, utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-col bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
<header class="text-white text-2xl font-bold mb-4">E-commerce Store</header>
<div class="flex flex-wrap gap-4">
<div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
<img src="https://picsum.photos/200/300" alt="Product Image" class="mb-2 rounded-md">
<h2 class="text-lg font-bold text-yellow-300">Product Title 1</h2>
<p class="text-white">This is a brief description of the product. It's bold and raw.</p>
<button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
<img src="https://picsum.photos/200/301" alt="Product Image" class="mb-2 rounded-md">
<h2 class="text-lg font-bold text-yellow-300">Product Title 2</h2>
<p class="text-white">This is a brief description of the product. It's bold and raw.</p>
<button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
<img src="https://picsum.photos/200/302" alt="Product Image" class="mb-2 rounded-md">
<h2 class="text-lg font-bold text-yellow-300">Product Title 3</h2>
<p class="text-white">This is a brief description of the product. It's bold and raw.</p>
<button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
<footer class="text-center mt-4 text-gray-400">
<p>© 2023 E-commerce Store</p>
</footer>
</div>Componenti correlati
Contenitore di design dei materiali
Un componente contenitore in stile Material Design che utilizza Tailwind CSS, con design reattivo e supporto per temi scuri.
Componente contenitore
Un componente contenitore di portfolio scheumorfico con un tema scuro e un design reattivo, che mostra lavori e prodotti con elementi interattivi.
Componente contenitore
Un componente contenitore minimalista per un cruscotto che utilizza Tailwind CSS con supporto per la modalità oscura.