Componenti Componenti di visualizzazione dei dati Componente di visualizzazione dei dati

Componente di visualizzazione dei dati

Un componente di visualizzazione dei dati reattivo progettato con un'estetica retrò/vintage ispirata agli anni '80 e '90, con supporto per temi scuri e l'utilizzo di immagini segnaposto.

Anteprima

Codice HTML

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold mb-4 text-center">Data Visualization</h2>
    <div class="mb-4">
        <h3 class="text-lg font-semibold mb-2">User Statistics</h3>
        <div class="overflow-hidden rounded-lg">
            <img class="w-full h-32 object-cover" src="https://picsum.photos/id/237/400/200" alt="Data Visualization Image">
        </div>
        <p class="mt-2 text-sm">This chart represents the users joining over the past year.</p>
    </div>
    <div class="font-mono mb-6">
        <p class="text-sm">Last updated: <span class="font-bold">2 days ago</span></p>
    </div>
    <div class="bg-gray-700 p-4 text-center rounded-lg">
        <h3 class="text-lg font-semibold">Profile Overview</h3>
        <div class="flex justify-around mt-4">
            <div class="flex flex-col items-center">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <span class="mt-2 text-sm">User 1</span>
            </div>
            <div class="flex flex-col items-center">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
                <span class="mt-2 text-sm">User 2</span>
            </div>
        </div>
    </div>
    <style>
        @media (prefers-color-scheme: dark) {
            .bg-gray-800 {
                background-color: #1f2937;
            }
            .bg-gray-700 {
                background-color: #374151;
            }
        }
    </style>
</div>

Componenti correlati

Componente di visualizzazione dei dati - Agricoltura industriale

Un componente di visualizzazione dei dati con un'estetica industriale e grezza, che utilizza una combinazione di colori viola/viola, adatto per l'agricoltura e i siti Web di allevamento. Visualizza le metriche chiave in un layout reattivo con supporto per la modalità scura.

Aperto

Componenti di visualizzazione dei dati

Un componente di visualizzazione dei dati reattivo con elementi di progettazione 3D con supporto per temi scuri.

Aperto

Social_Connection_Chart_Component

Un componente del grafico delle connessioni sociali di moderata complessità con un design organico e ispirato alla natura, con nero, bianco e un unico colore d'accento brillante. Progettato per piattaforme di appuntamenti e sociali, mostra visivamente le connessioni con linee fluide e avatar utente. Completamente reattivo con supporto per la modalità oscura.

Aperto