Componente Gráficos
Un componente de gráficos de estilo 3D responsivo con soporte para temas oscuros que utiliza Tailwind CSS.
Código HTML
<div class="max-w-4xl mx-auto p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl text-center font-bold mb-5 text-gray-900 dark:text-gray-100">3D Charts Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200?random=1" alt="Chart Image 1" class="w-full h-32 object-cover rounded-b-lg">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 1</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description of chart 1 with some insightful data visualizations.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200?random=2" alt="Chart Image 2" class="w-full h-32 object-cover rounded-b-lg">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 2</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description of chart 2 with engaging three-dimensional data models.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200?random=3" alt="Chart Image 3" class="w-full h-32 object-cover rounded-b-lg">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 3</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description of chart 3 with innovative 3D elements.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200?random=4" alt="Chart Image 4" class="w-full h-32 object-cover rounded-b-lg">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 4</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description of chart 4 that highlights key metrics.</p>
</div>
</div>
</div>
<div class="mt-5 text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mx-auto mb-2">
<p class="text-gray-700 dark:text-gray-300">Created by John Doe</p>
</div>
</div>Componentes relacionados
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.
Componente Gráficos
Un componente de gráficos complejo diseñado para sitios web comerciales y corporativos, con un diseño 3D, una combinación de colores complementaria y una estructura receptiva con soporte para modo oscuro.
Componente Gráficos
Un componente de gráficos complejo diseñado para aplicaciones web de comercio electrónico en modo oscuro con un esquema de color en escala de grises. Este componente incluye múltiples elementos interactivos como gráficos, puntos de datos, información sobre herramientas y botones, con un diseño responsivo que utiliza Tailwind CSS.