Componenti Componenti di visualizzazione dei dati Componente Componenti di visualizzazione dei dati

Componente Componenti di visualizzazione dei dati

Un semplice componente di visualizzazione dei dati progettato per l'e-commerce, caratterizzato da un'interfaccia in modalità scura con colori vivaci.

Anteprima

Codice HTML

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-4">Sales Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-lg font-semibold">Total Sales</h3>
            <p class="text-3xl text-violet-500">$12,345</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-lg font-semibold">Total Orders</h3>
            <p class="text-3xl text-green-400">150</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-lg font-semibold">Total Customers</h3>
            <p class="text-3xl text-blue-400">80</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-lg font-semibold">Average Order Value</h3>
            <p class="text-3xl text-yellow-400">$82.30</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Recent Orders</h3>
        <ul class="list-disc list-inside mt-2">
            <li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                    <span>John Doe</span>
                </div>
                <span class="text-violet-400">$120.00</span>
            </li>
            <li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                    <span>Jane Smith</span>
                </div>
                <span class="text-green-400">$85.00</span>
            </li>
            <li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                    <span>Emily Johnson</span>
                </div>
                <span class="text-blue-400">$96.00</span>
            </li>
        </ul>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Sales Chart</h3>
        <img src="https://picsum.photos/400/200" alt="Sales Chart" class="mt-2 rounded-lg">
    </div>
</div>

Componenti correlati

CRM_Data_Visualization_Component

Un componente di visualizzazione dei dati CRM complesso e reattivo con uno stile acquerello/artistico, una combinazione di colori monocromatica e il supporto della modalità scura. Progettato per gli strumenti aziendali.

Aperto

Componenti di visualizzazione dei dati

Un componente di visualizzazione dei dati progettato in stile brutalista con Tailwind CSS, con layout reattivi e supporto per temi scuri.

Aperto

Componente Componenti di visualizzazione dei dati

Componente di visualizzazione dei dati Glassmorphism per blog/contenuti

Aperto