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
Grafico a barre in modalità scura
Grafico a barre reattivo per la visualizzazione dei dati con supporto della modalità scura.
Componente Grafici
Un componente dashboard reattivo che dimostra un design scheumorfico con colori pastello e supporto della modalità scura, con grafici a barre simulati, grafici a linee e indicatori chiave di prestazione utilizzando HTML puro e CSS Tailwind. Non è incluso alcun JavaScript; I grafici sono rappresentazioni visive.
Componente Grafici
Un componente grafico reattivo progettato in stile scheumorfismo con una combinazione di colori in scala di grigi e supporto per la modalità scura, ideale per applicazioni di e-commerce.