Componente Componenti di visualizzazione dei dati
Un semplice componente di visualizzazione dei dati progettato per l'e-commerce, caratterizzato da un'interfaccia in modalità scura con colori vivaci.
Codice HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-bold mb-4">Sales Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-lg font-semibold">Total Sales</h3>
<p class="text-3xl text-violet-500">$12,345</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-lg font-semibold">Total Orders</h3>
<p class="text-3xl text-green-400">150</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-lg font-semibold">Total Customers</h3>
<p class="text-3xl text-blue-400">80</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-lg font-semibold">Average Order Value</h3>
<p class="text-3xl text-yellow-400">$82.30</p>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold">Recent Orders</h3>
<ul class="list-disc list-inside mt-2">
<li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span>John Doe</span>
</div>
<span class="text-violet-400">$120.00</span>
</li>
<li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span>Jane Smith</span>
</div>
<span class="text-green-400">$85.00</span>
</li>
<li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span>Emily Johnson</span>
</div>
<span class="text-blue-400">$96.00</span>
</li>
</ul>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold">Sales Chart</h3>
<img src="https://picsum.photos/400/200" alt="Sales Chart" class="mt-2 rounded-lg">
</div>
</div>Componenti correlati
Componente di visualizzazione dei dati in modalità oscura
Un componente di visualizzazione dei dati complesso e reattivo progettato con un tema monocromatico scuro. Dispone di più elementi di visualizzazione interattivi, tra cui un grafico a linee, un grafico a barre e schede dati. Include effetti al passaggio del mouse e utilizza il supporto per la modalità oscura di Tailwind. Adatto per blog e piattaforme di consumo di contenuti.
Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo progettato con principi di Material Design come layout basati su griglia ed effetti di profondità, con supporto per temi scuri.
Componente di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo progettato in stile Material Design con una combinazione di colori pastello, adatto per mostrare il lavoro del portfolio con supporto per la modalità oscura.