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 Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati retrò-vintage per i social media, caratterizzato da una combinazione di colori complementari e una complessità moderata. È reattivo e supporta la modalità oscura utilizzando Tailwind CSS.
Componente di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo progettato in stile Material Design con una combinazione di colori pastello, adatto per mostrare il lavoro del portfolio con supporto per la modalità oscura.
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.