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.
Código HTML
<div class="p-6 max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Portfolio Charts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-pink-100 dark:bg-pink-900 rounded-lg shadow-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Sales Overview</h3>
<img src="https://picsum.photos/400/200" alt="Sales Chart" class="rounded-lg shadow-md">
</div>
<div class="bg-blue-100 dark:bg-blue-900 rounded-lg shadow-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Engagement</h3>
<img src="https://picsum.photos/400/200?random=1" alt="Engagement Chart" class="rounded-lg shadow-md">
</div>
<div class="bg-green-100 dark:bg-green-900 rounded-lg shadow-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Traffic Sources</h3>
<img src="https://picsum.photos/400/200?random=2" alt="Traffic Sources Chart" class="rounded-lg shadow-md">
</div>
<div class="bg-yellow-100 dark:bg-yellow-900 rounded-lg shadow-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Customer Feedback</h3>
<img src="https://picsum.photos/400/200?random=3" alt="Feedback Chart" class="rounded-lg shadow-md">
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Team Members</h3>
<div class="flex flex-wrap mt-4 gap-4">
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
<p class="text-gray-800 dark:text-gray-200">John Doe</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
<p class="text-gray-800 dark:text-gray-200">Jane Smith</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
<p class="text-gray-800 dark:text-gray-200">Alex Johnson</p>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
<p class="text-gray-800 dark:text-gray-200">Emily Davis</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Gráficos
Un componente de gráficos responsivo diseñado en estilo skeuomorphism con un esquema de color en escala de grises y compatibilidad con modo oscuro, ideal para aplicaciones de comercio electrónico.
SkeuomorphismChartsComponent
Componente de gráficos esqueuomórficos para redes sociales con colores complementarios
Componente de gráficos de esqueuomorfismo
Un componente de gráficos responsivo con estilo Skeuomorphism, colores vibrantes y soporte de modo oscuro para interfaces de redes sociales.