Componente Columnas
Un componente de columna simple y receptivo con un tema monocromático oscuro, adecuado para exhibir portafolios.
Código HTML
<div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum1/400/300" alt="Project 1">
<h3 class="text-xl font-semibold mb-2">Project One</h3>
<p class="text-gray-400 text-sm">A brief description of project one, highlighting its key features and technologies used.</p>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum2/400/300" alt="Project 2">
<h3 class="text-xl font-semibold mb-2">Project Two</h3>
<p class="text-gray-400 text-sm">Another project description, focusing on the impact and results of the work.</p>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum3/400/300" alt="Project 3">
<h3 class="text-xl font-semibold mb-2">Project Three</h3>
<p class="text-gray-400 text-sm">Description for the third project, detailing the creative process and solutions.</p>
</div>
</div>
</div>Componentes relacionados
Componente Columnas
Un componente de columnas de estilo Material Design con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Componente Columnas
Un componente de columnas responsivo diseñado para la presentación de carteras con soporte para modo oscuro, utilizando un esquema de color en escala de grises y Tailwind CSS.