Componente de diseño de cuadrícula 3D para portafolio
Un componente de diseño de cuadrícula complejo, receptivo y de estilo 3D para portafolios que usan colores complementarios, con soporte para modo oscuro e imágenes de picsum.photos.
Código HTML
<div class="p-8 dark:bg-gray-900 min-h-screen">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-2xl perspective-1000">
<div class="relative group">
<img src="https://picsum.photos/seed/picsum1/600/400" alt="Project 1" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
<a href="#" class="text-white text-xl font-bold">View Project</a>
</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Project Alpha</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of Project Alpha, highlighting its key features and technologies used. This is a placeholder.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-2xl perspective-1000">
<div class="relative group">
<img src="https://picsum.photos/seed/picsum2/600/400" alt="Project 2" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
<a href="#" class="text-white text-xl font-bold">View Project</a>
</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Project Beta</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of Project Beta, highlighting its key features and technologies used. This is a placeholder.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-2xl perspective-1000">
<div class="relative group">
<img src="https://picsum.photos/seed/picsum3/600/400" alt="Project 3" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
<a href="#" class="text-white text-xl font-bold">View Project</a>
</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Project Gamma</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of Project Gamma, highlighting its key features and technologies used. This is a placeholder.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-2xl perspective-1000">
<div class="relative group">
<img src="https://picsum.photos/seed/picsum4/600/400" alt="Project 4" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
<a href="#" class="text-white text-xl font-bold">View Project</a>
</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Project Delta</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of Project Delta, highlighting its key features and technologies used. This is a placeholder.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Diseño de cuadrícula brutalista
Un componente de diseño de cuadrícula receptivo con un estilo de diseño brutalista con alto contraste, diseños inusuales y compatibilidad con temas oscuros.
Neumorfismo Cuadrícula del panel de control
Componente de tablero de diseño de cuadrícula de neumorfismo con esquema de color complementario
Componente de diseño de cuadrícula
Un componente de diseño de cuadrícula minimalista para comercio electrónico con un esquema de color triádico y compatibilidad con modo oscuro, diseñado para experiencias de compra en línea.