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 componentes de visualización de datos
Un componente de visualización de datos simple diseñado para el comercio electrónico, con una interfaz de modo oscuro con colores vibrantes.
Componente de visualización de datos en modo oscuro
Un componente de visualización de datos complejo y receptivo diseñado con un tema monocromático oscuro. Cuenta con múltiples elementos de visualización interactivos, incluido un gráfico de líneas, un gráfico de barras y tarjetas de datos. Incluye efectos de desplazamiento y utiliza la compatibilidad con el modo oscuro de Tailwind. Apto para blogs y plataformas de consumo de contenidos.
Componente de componentes de visualización de datos
Un componente de visualización de datos responsivo con múltiples elementos interactivos, diseñado para un sitio web de blog/contenido. Cuenta con un diseño minimalista/plano, una combinación de colores complementaria e incluye soporte para temas oscuros.