Material Design Scheda cruscotto triadico
Un componente di visualizzazione dei contenuti del cruscotto semplice e reattivo con un'estetica Material Design, che utilizza una combinazione di colori triadica e il supporto della modalità scura. Adatto per la visualizzazione di metriche o informazioni chiave.
Codice HTML
<div class="p-4 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
<!-- Metric Card 1 (Red/Pinkish) -->
<div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
<div class="relative p-6 pt-16">
<div class="absolute top-0 left-0 right-0 h-16 bg-red-500 dark:bg-red-700 rounded-t-lg"></div>
<div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-red-200 dark:border-red-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-600 dark:text-red-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L19.5 7.5M9.75 17V10" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.5A.5.5 0 1013.5 15.5A.5.5 0 0013.5 16.5M17.5 12.5A.5.5 0 1017.5 11.5A.5.5 0 0017.5 12.5" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">Total Sales</h3>
<p class="text-4xl font-extrabold text-red-600 dark:text-red-400 text-center mb-4">$12,345</p>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center">+5% from last month</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
<a href="#" class="text-red-600 dark:text-red-400 font-medium hover:underline text-sm">View Details</a>
</div>
<div class="absolute inset-0 bg-red-100 dark:bg-red-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
</div>
<!-- Metric Card 2 (Blue/Cyan) -->
<div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
<div class="relative p-6 pt-16">
<div class="absolute top-0 left-0 right-0 h-16 bg-blue-500 dark:bg-blue-700 rounded-t-lg"></div>
<div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-blue-200 dark:border-blue-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600 dark:text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.892A13.914 13.914 0 0112 16c2.582 0 5.121.75 7.029 2.019M12 15a4 4 0 100-8 4 4 0 000 8z" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">New Users</h3>
<p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 text-center mb-4">789</p>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center">+15% week over week</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
<a href="#" class="text-blue-600 dark:text-blue-400 font-medium hover:underline text-sm">User Analytics</a>
</div>
<div class="absolute inset-0 bg-blue-100 dark:bg-blue-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
</div>
<!-- Metric Card 3 (Green/Lime) -->
<div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
<div class="relative p-6 pt-16">
<div class="absolute top-0 left-0 right-0 h-16 bg-green-500 dark:bg-green-700 rounded-t-lg"></div>
<div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-green-200 dark:border-green-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-600 dark:text-green-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18A9 9 0 0112 3z" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">Bounce Rate</h3>
<p class="text-4xl font-extrabold text-green-600 dark:text-green-400 text-center mb-4">3.7<span class="text-xl">%</span></p>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center">-0.5% from previous period</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
<a href="#" class="text-green-600 dark:text-green-400 font-medium hover:underline text-sm">View Report</a>
</div>
<div class="absolute inset-0 bg-green-100 dark:bg-green-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
</div>
</div>
</div>Componenti correlati
Industrial_3D_Content_Display
Un componente di visualizzazione dei contenuti semplice e reattivo per le aziende manifatturiere/industriali, caratterizzato da un design 3D discreto che utilizza colori tenui e supporto per la modalità scura.
Componente Visualizzazione contenuto
Un componente di visualizzazione dei contenuti reattivo che incorpora microinterazioni con animazioni coinvolgenti incentrate sulle azioni dell'utente. Include il supporto per la modalità oscura e segnaposto per immagini e avatar.
Componente Visualizzazione contenuto
Un componente di visualizzazione dei contenuti reattivo caratterizzato da uno stile di design minimalista e piatto, ideale per blog e consumo di contenuti. Ha una combinazione di colori in scala di grigi ed è dotato di elementi interattivi mentre supporta la modalità oscura.