Componente de componentes de visualización de datos
Un componente de visualización de datos retro-vintage para redes sociales, con un esquema de color complementario y una complejidad moderada. Es responsivo y admite el modo oscuro usando Tailwind CSS.
Código HTML
<div class="p-8 bg-gradient-to-br from-purple-700 to-indigo-900 min-h-screen dark:from-gray-900 dark:to-black font-mono">
<div class="max-w-4xl mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex">
<div class="md:flex-shrink-0 p-6 md:w-1/3 bg-purple-800 dark:bg-gray-900 text-white flex flex-col justify-between">
<div>
<h2 class="text-3xl font-bold mb-4 text-yellow-300 dark:text-cyan-400">Activity Monitor</h2>
<p class="text-purple-200 dark:text-gray-400 mb-6">Your social media pulse, vintage style.</p>
<div class="mb-4">
<p class="text-xl font-semibold text-yellow-300 dark:text-cyan-400">Followers Gained</p>
<p class="text-4xl">1,234</p>
</div>
<div>
<p class="text-xl font-semibold text-yellow-300 dark:text-cyan-400">Likes This Week</p>
<p class="text-4xl">5,678</p>
</div>
</div>
<div class="mt-8">
<div class="w-16 h-16 rounded-full overflow-hidden mx-auto border-4 border-yellow-300 dark:border-cyan-400">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-full h-full object-cover">
</div>
<p class="text-center text-sm mt-2 text-purple-300 dark:text-gray-400">Logged in as @RetroUser</p>
</div>
</div>
<div class="p-6 md:w-2/3 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-gray-200">Engagement Overview</h3>
<!-- Graph Placeholder - Simplified for HTML Only -->
<div class="bg-purple-200 dark:bg-gray-700 rounded-lg p-4 mb-6 relative">
<div class="h-48 w-full bg-gradient-to-t from-red-600 to-pink-500 dark:from-red-800 dark:to-pink-700 rounded-md relative overflow-hidden">
<div class="absolute bottom-0 left-0 right-0 h-1/4 bg-red-700 opacity-75 animate-pulse"></div>
<div class="absolute bottom-0 right-1/4 w-1/3 h-1/2 bg-yellow-400 opacity-75 animate-pulse" style="animation-delay: 0.5s;"></div>
<div class="absolute bottom-0 left-1/2 w-1/4 h-3/4 bg-green-400 opacity-75 animate-pulse" style="animation-delay: 1s;"></div>
<div class="absolute bottom-0 w-1/6 h-full bg-blue-400 opacity-75 animate-pulse" style="animation-delay: 1.5s;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center mt-2">Activity Trend (Simulated)</p>
</div>
<div class="grid grid-cols-2 gap-4 text-center">
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg">
<p class="text-lg font-semibold text-purple-600 dark:text-gray-300">Posts</p>
<p class="text-3xl text-purple-800 dark:text-gray-100">87</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg">
<p class="text-lg font-semibold text-purple-600 dark:text-gray-300">Shares</p>
<p class="text-3xl text-purple-800 dark:text-gray-100">321</p>
</div>
</div>
</div>
<div class="mt-8 text-sm text-gray-500 dark:text-gray-400 text-center">
<p>© 2023 Retro Social Analytics. All rights reserved.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de visualización de datos
Un componente de visualización de datos receptivo diseñado en estilo Material Design con un esquema de color pastel, adecuado para mostrar el trabajo de portafolio con soporte para modo oscuro.
Componente de visualización de datos de neumorfismo
Componente de visualización de datos de estilo neumorfismo para contenido de blog, con un esquema de color pastel, complejidad moderada, capacidad de respuesta y compatibilidad con modo oscuro.
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.