Composante des composantes interactives
Composant de composants interactifs avec conception matérielle, schéma de couleurs triadique, complexité complexe, pour le commerce électronique, avec conception réactive et prise en charge du thème sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 p-4">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Short product description goes here. It can span a couple of lines.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Another short product description for variety and demonstration.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-red-600 dark:text-red-400">$249.50</span>
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 dark:bg-red-400 dark:hover:bg-red-500">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Yet another product description to fill the card space.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-green-600 dark:text-green-400">$145.00</span>
<button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 dark:bg-green-400 dark:hover:bg-green-500">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composantes interactives
Un composant Web conçu avec des éléments skeuomorphes pour les interfaces de médias sociaux, avec une palette de couleurs complémentaire et la prise en charge du thème sombre.
Composante des composantes interactives
Un composant interactif de style Neumorphism avec des effets réactifs et une prise en charge du thème sombre.