Componente Gráficos
Un componente de panel de control receptivo que demuestra un diseño esqueuomórfico con colores pastel y compatibilidad con el modo oscuro, con gráficos de barras simulados, gráficos de líneas e indicadores clave de rendimiento utilizando HTML puro y CSS de Tailwind. No se incluye JavaScript; Los gráficos son representaciones visuales.
Código HTML
<div class="min-h-screen p-4 sm:p-8
bg-gradient-to-br from-blue-100 to-gray-100 dark:from-gray-900 dark:to-gray-800
font-sans text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto">
<!-- Dashboard Header -->
<header class="mb-8 p-6 rounded-xl relative
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-xl shadow-blue-200/50 dark:shadow-gray-950/70
border border-gray-100 dark:border-gray-700
text-center
">
<h1 class="text-3xl sm:text-4xl font-extrabold mb-2 text-gray-900 dark:text-gray-100 tracking-wide drop-shadow-sm">
Analytics Dashboard
</h1>
<p class="text-md sm:text-lg text-gray-600 dark:text-gray-400">
Data insights at a glance with a Classic UI
</p>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Card 1: Sales Overview (Bar Chart) -->
<div class="
relative rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
overflow-hidden
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Sales Overview</h3>
<!-- Timeframe buttons (skeuomorphic) -->
<div class="flex space-x-2 mb-6">
<button class="
px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
text-gray-700 dark:text-gray-300
shadow-sm shadow-gray-200 dark:shadow-gray-900
border border-gray-200 dark:border-gray-700
hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
">Daily</button>
<button class="
px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
text-gray-700 dark:text-gray-300
shadow-sm shadow-gray-200 dark:shadow-gray-900
border border-gray-200 dark:border-gray-700
hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
">Monthly</button>
</div>
<!-- Chart Area - Recessed look -->
<div class="
min-h-[180px] sm:min-h-[200px] w-full p-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
relative flex items-end justify-around space-x-2
">
<!-- Example Bar Chart bars -->
<div class="w-1/6 md:w-1/6 h-full bg-blue-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-blue-600" style="height: 60%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-green-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-green-600" style="height: 80%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-purple-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-purple-600" style="height: 70%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-pink-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-pink-600" style="height: 40%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-yellow-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-yellow-600" style="height: 90%;"></div>
</div>
<!-- Legend -->
<div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Product A
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-green-300 dark:bg-green-600 mr-2 shadow-sm"></span> Product B
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Product C
</div>
</div>
</div>
<!-- Card 2: User Engagement (Simulated Line Chart) -->
<div class="
relative rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">User Engagement</h3>
<div class="
min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
relative
">
<!-- Placeholder for Line Chart - Use div elements to represent a wavy line -->
<div class="absolute inset-0 flex items-end">
<div class="w-full h-full bg-gradient-to-t from-blue-300/60 to-transparent dark:from-blue-600/60"
style="
clip-path: polygon(0 100%, 10% 80%, 20% 90%, 30% 70%, 40% 75%, 50% 60%, 60% 65%, 70% 50%, 80% 55%, 90% 40%, 100% 0, 100% 100%);
"></div>
</div>
<div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/4"></div>
<div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/2"></div>
<div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-3/4"></div>
</div>
<div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Active Users
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-gray-300 dark:bg-gray-500 mr-2 shadow-sm"></span> Sessions
</div>
</div>
</div>
<!-- Card 3: Traffic Sources (Simulated Pie Chart / Segmented Data) -->
<div class="
relative rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Traffic Sources</h3>
<div class="
min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
flex items-center justify-center
">
<!-- Simple Circle Placeholder for Pie Chart -->
<div class="w-36 h-36 sm:w-48 sm:h-48 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-700 flex items-center justify-center
bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-600 dark:to-pink-600
">
<div class="text-center">
<p class="text-3xl sm:text-4xl font-bold text-white drop-shadow-md">85%</p>
<p class="text-sm sm:text-md text-white drop-shadow-sm">Total Traffic</p>
</div>
</div>
</div>
<!-- Legend for segments -->
<div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Direct (45%)
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-pink-300 dark:bg-pink-600 mr-2 shadow-sm"></span> Referral (30%)
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-yellow-300 dark:bg-yellow-600 mr-2 shadow-sm"></span> Social (25%)
</div>
</div>
</div>
<!-- Card 4: Key Performance Indicators -->
<div class="
relative col-span-1 md:col-span-2 lg:col-span-3
rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Key Performance Indicators</h3>
<div class="
min-h-[150px] sm:min-h-[200px] w-full p-4 mb-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8 place-items-center
">
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Users</p>
<p class="text-2xl sm:text-3xl font-bold text-blue-500 dark:text-blue-400 mt-1 drop-shadow-md">1.2M</p>
</div>
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Revenue</p>
<p class="text-2xl sm:text-3xl font-bold text-green-500 dark:text-green-400 mt-1 drop-shadow-md">$500k</p>
</div>
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Conversion Rate</p>
<p class="text-2xl sm:text-3xl font-bold text-purple-500 dark:text-purple-400 mt-1 drop-shadow-md">4.5%</p>
</div>
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Bounce Rate</p>
<p class="text-2xl sm:text-3xl font-bold text-red-500 dark:text-red-400 mt-1 drop-shadow-md">28%</p>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Gráficos
Un componente de gráficos responsivo diseñado con los principios de Material Design, con un esquema de color pastel y una interactividad compleja para mostrar portafolios. Incluye soporte para el modo oscuro con clases CSS de Tailwind.
VibrantGlassmorphismChart
Un componente de gráfico de Glassmorphism simple con colores vibrantes, adecuado para blogs y sitios de contenido. El componente es responsivo e incluye soporte para temas oscuros mediante Tailwind CSS.
Componente Gráficos
Un componente de gráficos complejo diseñado para aplicaciones web de comercio electrónico en modo oscuro con un esquema de color en escala de grises. Este componente incluye múltiples elementos interactivos como gráficos, puntos de datos, información sobre herramientas y botones, con un diseño responsivo que utiliza Tailwind CSS.