Componente Componenti di visualizzazione dei dati
Un semplice componente di visualizzazione dei dati in modalità oscura per i social media con una combinazione di colori analoga.
Codice HTML
<div class="bg-gray-900 min-h-screen p-4 text-gray-200">
<div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-xl font-bold mb-4 text-blue-300">Social Media Engagement</h2>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-gray-400">Likes:</span>
<span class="text-blue-400 font-semibold">12,345</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-400">Comments:</span>
<span class="text-green-400 font-semibold">890</span>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-400">Shares:</span>
<span class="text-teal-400 font-semibold">321</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2.5 mt-4">
<div class="bg-gradient-to-r from-blue-400 via-green-400 to-teal-400 h-2.5 rounded-full" style="width: 75%;"></div>
</div>
<p class="text-sm text-gray-500 text-center mt-2">Overall Engagement: 75%</p>
</div>
</div>
</div>Componenti correlati
Componenti di visualizzazione dei dati
Un complesso componente di visualizzazione dei dati della dashboard con estetica retrò/vintage e combinazioni di colori complementari.
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.
Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo con elementi di progettazione 3D con supporto per temi scuri.