Componentes de visualización de datos
Componentes de visualización de datos con estilo neumorfismo para una cartera con compatibilidad con temas oscuros
Código HTML
<div class="bg-gray-300 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Data Visualization</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Chart Component -->
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
<h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Sales Analytics</h3>
<img src="https://picsum.photos/400/200?random=1" alt="Sales Chart" class="rounded-md" />
<p class="text-gray-600 dark:text-gray-400 mt-2">An overview of sales performance over the last year.</p>
</div>
<!-- Chart Component -->
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
<h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">User Engagement</h3>
<img src="https://picsum.photos/400/200?random=2" alt="User Engagement Chart" class="rounded-md" />
<p class="text-gray-600 dark:text-gray-400 mt-2">Statistics related to user interaction across different platforms.</p>
</div>
<!-- Profile Component -->
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl col-span-1 md:col-span-2">
<h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Team Profile</h3>
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-12 h-12 rounded-full mr-3" />
<div class="text-gray-900 dark:text-gray-100">
<p class="font-semibold">Jane Doe</p>
<p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400">Jane specializes in data analysis and machine learning, with over 5 years of experience.</p>
</div>
</div>
</div>Componentes relacionados
Componente de visualización de datos
Un componente de visualización de datos receptivo diseñado en estilo Material Design con un esquema de color pastel, adecuado para mostrar el trabajo de portafolio con soporte para modo oscuro.
Componente de componentes de visualización de datos
Un componente de reserva/reserva complejo y minimalista con un esquema de color neón/eléctrico, con elementos de visualización de datos como un calendario y un selector de franjas horarias. Totalmente receptivo con soporte para modo oscuro.
Skeuomorphic_Vibrant_Blog_Viz
Un componente de visualización de datos complejo y esqueuomórfico para el consumo de blogs/contenido con una combinación de colores vibrantes, diseñado para la capacidad de respuesta y el modo oscuro.