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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-wrap items-center justify-center">
<div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 m-4">
<div class="relative">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/social1/400/300" alt="Product Image">
<div class="absolute top-0 right-0 bg-black bg-opacity-50 text-white text-xs font-bold px-3 py-1 m-2 rounded-full">Featured</div>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Jonathan Reinink">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Jonathan Reinink</p>
<p class="text-gray-600 dark:text-gray-400">Aug 14</p>
</div>
</div>
<button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-white">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
</button>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Product Title</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-white">$19.99</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Add to Cart</button>
</div>
<div class="mt-4 flex items-center">
<button class="flex items-center text-gray-700 dark:text-gray-300 mr-4">
<svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
<span>24 Likes</span>
</button>
<button class="flex items-center text-gray-700 dark:text-gray-300">
<svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.82A10.022 10.022 0 003 4.636v0a10.029 10.029 0 011.021-.304A10.021 10.021 0 0012 21c4.97 0 9-3.582 9-8z"></path>
</svg>
<span>12 Comments</span>
</button>
</div>
</div>
</div>
</div>Composants associés
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.
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 de tableau de bord e-commerce
Composant de tableau de bord de commerce électronique avec skeuomorphisme, couleurs vives et mise en page simple pour Tailwind CSS, avec prise en charge du thème réactif et sombre.