Componente Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo e compatibile con la modalità oscura per i blog, caratterizzato da un design retrò/vintage con una combinazione di colori complementari ed elementi interattivi complessi.
Codice HTML
<div class="bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200 p-8 font-sans">
<div class="container mx-auto">
<!-- Header -->
<header class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold text-indigo-700 dark:text-teal-400">Data Insights</h1>
<div class="flex items-center">
<span class="mr-4">Theme:</span>
<button class="px-3 py-1 rounded bg-indigo-700 text-white dark:bg-teal-400 dark:text-gray-900" onclick="document.documentElement.classList.toggle('dark')">Toggle Dark Mode</button>
</div>
</header>
<!-- Main Content -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Chart Area -->
<section class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold mb-4 text-indigo-700 dark:text-teal-400">Sales Performance</h2>
<!-- Placeholder for a complex chart - In a real scenario, this would be an SVG or canvas element -->
<div class="h-64 bg-gray-300 dark:bg-gray-600 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
[ Complex Chart Placeholder ]
</div>
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
<p>Detailed sales data visualization would appear here.</p>
</div>
</section>
<!-- Metrics and Details -->
<section class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<!-- Metric Card 1 -->
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
<h3 class="text-lg font-semibold mb-2 text-indigo-700 dark:text-teal-400">Total Revenue</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-gray-200">$150,000</p>
<p class="text-sm text-gray-600 dark:text-gray-400">+12% from last month</p>
</div>
<!-- Metric Card 2 -->
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
<h3 class="text-lg font-semibold mb-2 text-indigo-700 dark:text-teal-400">New Users</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-gray-200">3,500</p>
<p class="text-sm text-gray-600 dark:text-gray-400">-5% from last month</p>
</div>
<!-- Details Card -->
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg col-span-full">
<h3 class="text-lg font-semibold mb-4 text-indigo-700 dark:text-teal-400">Recent Activity</h3>
<ul class="text-sm text-gray-700 dark:text-gray-300">
<li class="mb-2">New order #1012 placed</li>
<li class="mb-2">User Componenti correlati
Componenti di visualizzazione dei dati
Un componente web per la visualizzazione dei dati che utilizza lo stile Material Design con Tailwind CSS, con layout reattivi, supporto per temi scuri e immagini segnaposto.
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.
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.