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.
HTML Code
<div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl max-w-sm mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Dashboard Overview</h2>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div>
<p class="text-gray-600 dark:text-gray-300 text-sm">Total Sales</p>
<p class="text-lg font-semibold text-green-600 dark:text-green-400">$5,200</p>
</div>
</div>
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center mr-3">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-8m8 0l-5 2v-2m5 0z"></path></svg>
</div>
<div>
<p class="text-gray-600 dark:text-gray-300 text-sm">New orders</p>
<p class="text-lg font-semibold text-orange-600 dark:text-orange-400">150</p>
</div>
</div>
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h.01M17 9l2 2m0 0l2-2m-2 2v-2v2z"></path></svg>
</div>
<div>
<p class="text-gray-600 dark:text-gray-300 text-sm">Pending Issues</p>
<p class="text-lg font-semibold text-red-600 dark:text-red-400">12</p>
</div>
</div>
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>Composants associés
Carte produit Art Déco Géométrique Marketplace
Un composant de carte produit pour une place de marché multi-fournisseurs, stylisé avec des motifs géométriques Art déco et une palette de couleurs arc-en-ciel dégradée. Les fonctionnalités incluent la conception réactive, la prise en charge du mode sombre et les éléments interactifs.
Composant Composants de commerce électronique
Il s’agit d’un composant e-commerce complexe pour les sites Web de voyage/tourisme, avec des effets de néon/lueur, une palette de couleurs d’automne et une réactivité totale avec prise en charge du mode sombre.
Composant de tableau de bord e-commerce
Un composant simple de tableau de bord de commerce électronique avec un design brutaliste et dynamique, avec une mise en page réactive et une prise en charge du thème sombre.