Componente Grafici
Un componente grafico complesso progettato per siti Web aziendali e aziendali, caratterizzato da un design 3D, una combinazione di colori complementari e una struttura reattiva con supporto per la modalità scura.
Codice HTML
<div class="flex flex-col justify-center items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-3/4 lg:w-3/5">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Business Performance Overview</h2>
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full">
<div class="flex-initial w-full bg-blue-500 dark:bg-blue-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Sales Chart</h3>
<img src="https://picsum.photos/300/200?random=1" alt="Sales Chart" class="rounded-md shadow-lg" />
</div>
<div class="flex-initial w-full bg-green-500 dark:bg-green-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Revenue Chart</h3>
<img src="https://picsum.photos/300/200?random=2" alt="Revenue Chart" class="rounded-md shadow-lg" />
</div>
</div>
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full mt-4">
<div class="flex-initial w-full bg-purple-500 dark:bg-purple-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Customer Feedback</h3>
<img src="https://picsum.photos/300/200?random=3" alt="Customer Feedback" class="rounded-md shadow-lg" />
</div>
<div class="flex-initial w-full bg-orange-500 dark:bg-orange-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Market Analysis</h3>
<img src="https://picsum.photos/300/200?random=4" alt="Market Analysis" class="rounded-md shadow-lg" />
</div>
</div>
<div class="flex justify-between items-center mt-6 w-full">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
<div class="ml-3">
<h4 class="text-lg font-semibold text-gray-800 dark:text-white">Analyst: John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Data Analyst, 5 years experience</p>
</div>
</div>
</div>Componenti correlati
Componente Grafici
Un componente grafico semplice e minimalista con effetti reattivi e supporto per temi scuri.
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.
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.