Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo con elementi di progettazione 3D con supporto per temi scuri.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center py-10">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden transform transition-all hover:scale-105 hover:shadow-2xl">
<div class="p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Sales Data Visualization</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg p-4 flex flex-col items-center shadow-lg">
<h3 class="text-xl text-white font-medium">Monthly Sales</h3>
<img class="rounded-lg mt-2" src="https://picsum.photos/300/200?random=1" alt="Sales Chart">
<p class="text-white mt-2">Total Sales: $15,000</p>
</div>
<div class="bg-gradient-to-br from-green-400 to-green-600 rounded-lg p-4 flex flex-col items-center shadow-lg">
<h3 class="text-xl text-white font-medium">User Growth</h3>
<img class="rounded-lg mt-2" src="https://picsum.photos/300/200?random=2" alt="User Growth Chart">
<p class="text-white mt-2">New Users: 500</p>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Team Members</h2>
<div class="flex justify-around mt-4">
<div class="flex flex-col items-center">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
<p class="text-sm text-gray-700 dark:text-gray-300">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Sales Manager</p>
</div>
<div class="flex flex-col items-center">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 2">
<p class="text-sm text-gray-700 dark:text-gray-300">Jane Smith</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Data Analyst</p>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo progettato con un'estetica retrò/vintage ispirata agli anni '80 e '90, con supporto per temi scuri e l'utilizzo di immagini segnaposto.
Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati progettato in stile brutalista con Tailwind CSS, con layout reattivi e supporto per temi scuri.
Componente Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo e compatibile con la modalità oscura per i blog, caratterizzato da un design retrò/vintage con una combinazione di colori complementari ed elementi interattivi complessi.