Componenti di visualizzazione dei dati
Componenti di visualizzazione dei dati in stile neumorfismo per un portfolio con supporto del tema scuro
Codice HTML
<div class="bg-gray-300 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Data Visualization</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Chart Component -->
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
<h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Sales Analytics</h3>
<img src="https://picsum.photos/400/200?random=1" alt="Sales Chart" class="rounded-md" />
<p class="text-gray-600 dark:text-gray-400 mt-2">An overview of sales performance over the last year.</p>
</div>
<!-- Chart Component -->
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
<h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">User Engagement</h3>
<img src="https://picsum.photos/400/200?random=2" alt="User Engagement Chart" class="rounded-md" />
<p class="text-gray-600 dark:text-gray-400 mt-2">Statistics related to user interaction across different platforms.</p>
</div>
<!-- Profile Component -->
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl col-span-1 md:col-span-2">
<h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Team Profile</h3>
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-12 h-12 rounded-full mr-3" />
<div class="text-gray-900 dark:text-gray-100">
<p class="font-semibold">Jane Doe</p>
<p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400">Jane specializes in data analysis and machine learning, with over 5 years of experience.</p>
</div>
</div>
</div>Componenti correlati
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.
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.