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
Componente de columnas de fabricación corporativa/profesional
Un componente de columnas complejo y sensible diseñado para empresas manufactureras/industriales con una estética corporativa/profesional y una combinación de colores otoñales. Incluye soporte para modo oscuro y HTML semántico.
Componente Columnas
Un componente de columnas responsivo con pequeñas animaciones atractivas, adecuado para el comercio electrónico con un tema oscuro.
Componente Columnas
Un componente de columnas responsivo diseñado en un estilo brutalista con tonos tierra, adaptado para el comercio electrónico, con complejidad media y soporte para temas oscuros.