Composants fonctionnels
Composant fonctionnel pour le commerce électronique avec un design réactif et la prise en charge du thème sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 py-8">
<div class="container mx-auto px-4">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 px-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
<p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
<div class="mt-4 flex items-center">
<div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
<button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 px-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
<p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
<div class="mt-4 flex items-center">
<div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
<button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composants fonctionnels
Un composant doté d’un style de conception glassmorphism avec des effets réactifs et la prise en charge du thème sombre, utilisant Tailwind CSS.
Composants fonctionnels
Un composant de tableau de bord avec des composants fonctionnels utilisant les principes de conception matérielle, une palette de couleurs analogue et une complexité modérée. Le composant comprend une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.