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
Composant de portefeuille interactif
Un composant de portefeuille réactif avec des micro-interactions et une palette de couleurs pastel, prenant en charge le mode sombre avec Tailwind CSS.
Volet interactif de livraison de nourriture
Un composant complexe et interactif de livraison de nourriture et de restauration avec des effets de néons, des couleurs vives et de multiples éléments interactifs. Conçu pour la réactivité et la prise en charge du mode sombre.
Composante des composantes interactives
Un composant interactif conçu pour les plateformes d’emploi et de carrière, avec des lignes fluides organiques inspirées de la nature et une palette de couleurs vives de bonbons et de sucreries. Il comprend des cartes de travail avec des boutons d’application et des étiquettes de compétence, prenant en charge la réactivité et le mode sombre.