Componente Layout griglia
Un componente di layout a griglia minimalista per l'e-commerce con una combinazione di colori triadica e supporto per la modalità scura, progettato per le esperienze di acquisto online.
Codice HTML
<div class="container mx-auto px-4">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Shop Our Collection</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
<span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$39.99</span>
<button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
<span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$49.99</span>
<button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
<span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$59.99</span>
<button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 4</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
<span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$69.99</span>
<button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
<img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 5</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
<span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$79.99</span>
<button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
<img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 6</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
<span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$89.99</span>
<button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
</div>
</div>
</div>
</div>Componenti correlati
Griglia sanitaria vibrante ispirata alla carta
Un semplice componente di layout a griglia ispirato alla carta/stampa con colori vivaci, progettato per applicazioni mediche/sanitarie. È completamente reattivo, include il supporto per la modalità oscura e utilizza l'HTML semantico.
Componente Layout griglia
Un componente di layout a griglia reattivo con un design retrò/vintage, caratterizzato da un'estetica nostalgica degli anni '80/'90. Il componente include immagini segnaposto e avatar con supporto per la modalità scura.
Skeuomorphic_Grid_Layout_Business
Un componente di layout a griglia complesso e reattivo per siti Web aziendali/aziendali, caratterizzato da uno stile di design scheumorfico con colori neutri caldi e supporto per la modalità scura. Gli elementi imitano gli oggetti del mondo reale con profondità e texture sottili.