Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati in stile retrò/vintage con supporto per temi scuri ed effetti reattivi utilizzando Tailwind CSS.
Codice HTML
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Data Visualization</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow">
<img src="https://picsum.photos/400/200?random=1" alt="Data Chart 1" class="rounded-lg mb-2">
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Chart Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of chart 1 showing insightful data.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow">
<img src="https://picsum.photos/400/200?random=2" alt="Data Chart 2" class="rounded-lg mb-2">
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Chart Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of chart 2 providing valuable insights.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow mt-6">
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">User Profiles</h3>
<div class="flex mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="w-16 h-16 rounded-full mr-4">
<div>
<p class="text-gray-700 dark:text-gray-300 font-bold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
</div>
</div>
<div class="flex mt-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2" class="w-16 h-16 rounded-full mr-4">
<div>
<p class="text-gray-700 dark:text-gray-300 font-bold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Data Analyst</p>
</div>
</div>
</div>
</div>Componenti correlati
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.
Componente di visualizzazione dei dati Art Déco
Un componente complesso e reattivo per la visualizzazione dei dati in stile Art Déco per i servizi di consulenza, caratterizzato da motivi geometrici e una lussuosa combinazione di colori viola/viola. Include il supporto per la modalità oscura.
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.