Componente Dashboard E-commerce
Componente Dashboard per l'e-commerce con scheumorfismo, colori vivaci e layout semplice per Tailwind CSS, con supporto per temi reattivi e scuri.
Codice HTML
<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>Componenti correlati
Componente Componenti E-commerce
Componente e-commerce per un sito web aziendale minimalista, con design reattivo e supporto per temi scuri.
Componente Componenti E-commerce
Un componente di e-commerce reattivo progettato per la modalità oscura con combinazione di colori triadica, con elenchi di prodotti, un'icona del carrello della spesa e un avatar dell'utente.
Componenti e-commerce skeuomorfi
Un componente di e-commerce scheumorfo complesso, reattivo e monocromatico per siti Web aziendali con supporto per la modalità scura.