Componente Grafici
Un componente grafico semplice e reattivo con colori pastello e supporto per la modalità scura, progettato per il consumo di blog/contenuti con microinterazioni sottili tramite effetti al passaggio del mouse. Niente JavaScript.
Codice HTML
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
<div class="flex flex-col space-y-4">
<div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-blue-100 dark:bg-blue-700">
<div class="text-sm font-medium text-blue-800 dark:text-blue-200">January</div>
<div class="w-2/3 bg-blue-200 dark:bg-blue-600 rounded-full h-4">
<div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-full stunning-animation" style="width: 75%;"></div>
</div>
<div class="text-sm font-medium text-blue-800 dark:text-blue-200">75%</div>
</div>
<div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-green-100 dark:bg-green-700">
<div class="text-sm font-medium text-green-800 dark:text-green-200">February</div>
<div class="w-2/3 bg-green-200 dark:bg-green-600 rounded-full h-4">
<div class="bg-green-500 dark:bg-green-400 h-4 rounded-full stunning-animation" style="width: 60%;"></div>
</div>
<div class="text-sm font-medium text-green-800 dark:text-green-200">60%</div>
</div>
<div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-purple-100 dark:bg-purple-700">
<div class="text-sm font-medium text-purple-800 dark:text-purple-200">March</div>
<div class="w-2/3 bg-purple-200 dark:bg-purple-600 rounded-full h-4">
<div class="bg-purple-500 dark:bg-purple-400 h-4 rounded-full stunning-animation" style="width: 90%;"></div>
</div>
<div class="text-sm font-medium text-purple-800 dark:text-purple-200">90%</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Grafici
Un componente Charts reattivo progettato con i principi del Material Design, caratterizzato da una combinazione di colori pastello e un'interattività complessa per la presentazione dei portfolio. Include il supporto per la modalità oscura con le classi CSS Tailwind.
Industrial_Chart_Component_Ocean_Blue_Simple
Un componente grafico semplice e reattivo con un'estetica industriale di materie prime che utilizza toni oceano/blu, progettato per organizzazioni senza scopo di lucro/beneficenza. Include il supporto per la modalità scura.
Componente Grafici
Un componente grafico semplice e reattivo per applicazioni sportive/fitness, dotato di un'interfaccia utente in modalità scura con toni gioiello. Visualizza una metrica di base dello stato di avanzamento o delle prestazioni.