Componentes Componentes de visualización de datos Componente de componentes de visualización de datos

Componente de componentes de visualización de datos

Un componente simple de visualización de datos en modo oscuro para redes sociales con un esquema de color análogo.

Vista previa

Código 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>

Componentes relacionados

Componentes de visualización de datos

Un componente de visualización de datos diseñado en estilo brutalista con Tailwind CSS, con diseños responsivos y compatibilidad con temas oscuros.

Abrir

Luxury_Premium_Crypto_Stat_Card

Una tarjeta estadística cripto/blockchain simple y elegante con tonos de joya, diseño receptivo y soporte para modo oscuro, adecuada para aplicaciones de lujo y premium.

Abrir

Componente de componentes de visualización de datos

Componente de visualización de datos de glassmorphism para blog/contenido

Abrir