Componenti Componenti di visualizzazione dei dati Componente Componenti di visualizzazione dei dati

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.

Anteprima

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

Weather_Climate_Retro_Dark_Dashboard

Un semplice componente dashboard in modalità oscura a tema retrò per i dati meteorologici e climatici, reattivo su tutti i dispositivi.

Aperto

Componente di visualizzazione dei dati

Componente di visualizzazione dei dati di neumorfismo con effetti reattivi e supporto per temi scuri.

Aperto

Componenti di visualizzazione dei dati

Un componente di visualizzazione dei dati reattivo progettato con principi di Material Design come layout basati su griglia ed effetti di profondità, con supporto per temi scuri.

Aperto