Componente Columnas
Columnas responsivas en escala de grises de estilo 3D para una página de portafolio, con soporte para modo oscuro.
Código HTML
<section class="py-10 dark:bg-gray-900">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/300" alt="Project 1" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 1</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project one, highlighting its key features and technologies used.</p>
<a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/300" alt="Project 2" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 2</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project two, highlighting its key features and technologies used.</p>
<a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/300" alt="Project 3" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 3</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project three, highlighting its key features and technologies used.</p>
<a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
</div>
</div>
</div>
</div>
</section>Componentes relacionados
Columnas Componente 49
Un componente de columnas responsivo con un diseño esqueuomórfico que imita elementos del mundo real, con soporte para temas oscuros y uso de Tailwind CSS.
Componente Columnas
Un componente de columnas responsivo con pequeñas animaciones atractivas, adecuado para el comercio electrónico con un tema oscuro.
Componente Columnas
Componente de columnas responsivas con estilo Glassmorphism, combinación de colores triádica, nivel de complejidad simple para fines comerciales / corporativos, incluye soporte de modo oscuro.