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.
Codice HTML
<div class="max-w-2xl mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Sales Data</h2>
<div class="flex justify-between">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item A</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Item A" class="w-full rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 150</p>
<div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
<div class="h-2 bg-blue-500 rounded-full w-3/4"></div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item B</h3>
<img src="https://picsum.photos/200/100?random=2" alt="Item B" class="w-full rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 120</p>
<div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
<div class="h-2 bg-blue-500 rounded-full w-2/4"></div>
</div>
</div>
</div>
<div class="flex justify-between mt-4">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item C</h3>
<img src="https://picsum.photos/200/100?random=3" alt="Item C" class="w-full rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 100</p>
<div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
<div class="h-2 bg-blue-500 rounded-full w-1/4"></div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item D</h3>
<img src="https://picsum.photos/200/100?random=4" alt="Item D" class="w-full rounded-md">
<p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 80</p>
<div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
<div class="h-2 bg-blue-500 rounded-full w-1/5"></div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Grafici
Un componente grafico in stile brutalista per siti web aziendali, caratterizzato da una combinazione di colori triadica e complessità moderata. Include un design reattivo e il supporto per la modalità oscura utilizzando Tailwind CSS.
VibranteVetromorfismoGrafico
Un semplice componente del grafico Glassmorphism con colori vivaci, adatto per blog e siti di contenuti. Il componente è reattivo e include il supporto per il tema scuro utilizzando Tailwind CSS.
Retro_Vintage_Pastel_Social_Charts_Component
Un componente grafico complesso e reattivo con un'estetica retrò/vintage anni '80/'90 che utilizza colori pastello, progettato per le piattaforme di social media. Include il supporto per la modalità oscura.