Composant Neumorphisme E-commerce
Un composant de commerce électronique réactif conçu dans le style Neumorphism avec prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 w-full max-w-sm">
<img class="rounded-t-lg mb-4" src="https://picsum.photos/400/200" alt="Product Image" />
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">Product description goes here. This is a brief overview of the product features and benefits.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-gray-800 dark:text-white font-bold text-lg">
$29.99
</span>
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white rounded-full py-2 px-4 shadow-md hover:shadow-lg active:shadow-sm transition duration-300">
Add to Cart
</button>
</div>
<div class="flex items-center">
<img class="rounded-full w-10 h-10 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<span class="text-gray-600 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>Composants associés
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.
Composant Composants de commerce électronique
Un composant de commerce électronique réactif avec des micro-interactions, une palette de couleurs terre, une complexité modérée et une prise en charge du mode sombre.
grille-de-produits-monochrome-retro-monochrome
Un composant de grille de produits de commerce électronique rétro/vintage simple et réactif stylisé dans une palette violette monochromatique avec prise en charge du thème sombre. Le design évoque la nostalgie des années 80/90 avec une mise en page basique et des éléments minimaux, parfaits pour les expériences d’achat en ligne.