Componentes de visualización de datos
Un componente de visualización de datos de estilo retro/vintage con soporte para temas oscuros y efectos responsivos utilizando Tailwind CSS.
Código HTML
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Data Visualization</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow">
<img src="https://picsum.photos/400/200?random=1" alt="Data Chart 1" class="rounded-lg mb-2">
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Chart Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of chart 1 showing insightful data.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow">
<img src="https://picsum.photos/400/200?random=2" alt="Data Chart 2" class="rounded-lg mb-2">
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Chart Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of chart 2 providing valuable insights.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow mt-6">
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">User Profiles</h3>
<div class="flex mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="w-16 h-16 rounded-full mr-4">
<div>
<p class="text-gray-700 dark:text-gray-300 font-bold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
</div>
</div>
<div class="flex mt-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2" class="w-16 h-16 rounded-full mr-4">
<div>
<p class="text-gray-700 dark:text-gray-300 font-bold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Data Analyst</p>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Skeuomorphic_Vibrant_Business_Dashboard
Un componente de tablero complejo, receptivo y esqueuomórfico con colores vibrantes, diseñado para uso empresarial/corporativo, con visualizaciones de datos y elementos interactivos con soporte para modo oscuro.
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.