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
Forum_Community_Component
Un forum / discussion communautaire réactif et thématique avec un style de design d’entreprise / professionnel et une palette de couleurs océan/bleu, y compris la prise en charge du mode sombre.
Tableau de bord du commerce électronique
Un composant de tableau de bord e-commerce en mode sombre avec une mise en page simple pour la visualisation des données et les panneaux de contrôle.
Composants du commerce électronique
Un composant de commerce électronique de complexité modérée avec un design en mode sombre utilisant des couleurs de terre pour une présentation de portefeuille.