Componente de visualización de datos
Un componente de visualización de datos responsivo diseñado con una estética retro/vintage inspirada en los años 80 y 90, con soporte para temas oscuros y uso de imágenes de marcador de posición.
Código HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold mb-4 text-center">Data Visualization</h2>
<div class="mb-4">
<h3 class="text-lg font-semibold mb-2">User Statistics</h3>
<div class="overflow-hidden rounded-lg">
<img class="w-full h-32 object-cover" src="https://picsum.photos/id/237/400/200" alt="Data Visualization Image">
</div>
<p class="mt-2 text-sm">This chart represents the users joining over the past year.</p>
</div>
<div class="font-mono mb-6">
<p class="text-sm">Last updated: <span class="font-bold">2 days ago</span></p>
</div>
<div class="bg-gray-700 p-4 text-center rounded-lg">
<h3 class="text-lg font-semibold">Profile Overview</h3>
<div class="flex justify-around mt-4">
<div class="flex flex-col items-center">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="mt-2 text-sm">User 1</span>
</div>
<div class="flex flex-col items-center">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<span class="mt-2 text-sm">User 2</span>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800 {
background-color: #1f2937;
}
.bg-gray-700 {
background-color: #374151;
}
}
</style>
</div>Componentes relacionados
Social_Media_Dashboard
Un componente complejo del panel de control de redes sociales con una estética monocromática de Material Design, con diseños basados en cuadrículas, efectos de profundidad y capacidad de respuesta con soporte para modo oscuro. Diseñado para interfaces de redes sociales.
RetroDashboardComponent
Componente de tablero retro / vintage con esquema de escala de grises y soporte para modo oscuro. Este componente complejo presenta múltiples elementos interactivos, un diseño responsivo y utiliza Tailwind CSS para el estilo. Es adecuado para un tablero o panel de control.
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.