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.
Código HTML
<div class="max-w-4xl mx-auto p-4">
<h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Portfolio Showcase</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project. It's visually appealing and user-friendly.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/300/201" alt="Portfolio Item" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project. It focuses on usability and design.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/300/202" alt="Portfolio Item" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project. Created with attention to detail.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/300/203" alt="Portfolio Item" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project. Designed with modern aesthetics.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Social_Connection_Chart_Component
Un componente de gráfico de conexión social de complejidad moderada con un diseño orgánico inspirado en la naturaleza, con negro, blanco y un solo color de acento brillante. Diseñado para plataformas sociales y de citas, muestra visualmente las conexiones con líneas fluidas y avatares de usuario. Totalmente receptivo con soporte para modo oscuro.
RetroDashboardComponent
Componente de tablero retro / vintage con esquema de escala de grises y soporte para modo oscuro. Este componente complejo presenta múltiples elementos interactivos, un diseño responsivo y utiliza Tailwind CSS para el estilo. Es adecuado para un tablero o panel de control.
Weather_Climate_Retro_Dark_Dashboard
Un componente de tablero de modo oscuro simple y de temática retro para datos meteorológicos y climáticos, que responde en todos los dispositivos.