Composant de mise en page de grille
Un composant de mise en page de grille minimaliste pour le commerce électronique avec une palette de couleurs triadique et la prise en charge du mode sombre, conçu pour les expériences d’achat en ligne.
HTML Code
<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>Composants associés
Grille agricole ludique
Un composant de mise en page de grille simple, joyeux et réactif pour l’agriculture et les sites Web agricoles, avec des neutres chauds, des éléments arrondis et la prise en charge du mode sombre.
Composant de disposition de grille de skeuomorphisme
Composant de mise en page de grille Skeuomorphism avec effets réactifs et prise en charge du thème sombre
Composant de disposition de grille - Finance/Banque
Un composant de mise en page de grille réactif pour les applications financières/bancaires, doté d’une esthétique matérielle épurée avec des neutres chauds et une prise en charge du mode sombre.