Composante e-commerce
Un composant de commerce électronique réactif stylisé avec des couleurs Glassmorphism et pastel, adapté aux interfaces de médias sociaux, avec prise en charge du thème sombre.
HTML Code
<div class="flex flex-col items-center justify-center p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-lg bg-opacity-30">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-3">Featured Products</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
<img src="https://picsum.photos/200/300" alt="Product 1" class="mb-3 rounded-md shadow-sm">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1 goes here.</p>
<span class="font-bold text-xl text-gray-800 dark:text-gray-200">$19.99</span>
<button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
<img src="https://picsum.photos/200/301" alt="Product 2" class="mb-3 rounded-md shadow-sm">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2 goes here.</p>
<span class="font-bold text-xl text-gray-800 dark:text-gray-200">$29.99</span>
<button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
<img src="https://picsum.photos/200/302" alt="Product 3" class="mb-3 rounded-md shadow-sm">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3 goes here.</p>
<span class="font-bold text-xl text-gray-800 dark:text-gray-200">$39.99</span>
<button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
</div>
</div>
<div class="mt-5 flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-2">
<div class="text-left">
<p class="text-gray-800 dark:text-gray-200 font-bold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Great product! Highly recommend.</p>
</div>
</div>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-2">
<div class="text-left">
<p class="text-gray-800 dark:text-gray-200 font-bold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Loved it! Will buy again.</p>
</div>
</div>
</div>
</div>Composants associés
Composant Composants de commerce électronique
Un composant de commerce électronique réactif avec des micro-interactions, une palette de couleurs analogue et une prise en charge du thème sombre.
Composant Composants de commerce électronique
Un composant e-commerce brutaliste pour un blog, caractérisé par une palette de couleurs vives et une complexité modérée. Il comprend un design réactif avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Carte e-commerce pour les réseaux sociaux
Composant de commerce électronique axé sur les médias sociaux, le style Glassmorphism, la palette de couleurs monochromatiques, la mise en page complexe, la prise en charge réactive et le thème sombre.