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
Componente de componentes de visualización de datos
Componente de visualización de datos de glassmorphism para blog/contenido
Componente de visualización de datos
Un componente de visualización de datos responsivo diseñado con una estética retro/vintage inspirada en los años 80 y 90, con soporte para temas oscuros y uso de imágenes de marcador de posición.
Componentes de visualización de datos
Componentes de visualización de datos con estilo neumorfismo para una cartera con compatibilidad con temas oscuros