Componente Columnas
Un componente de columnas responsivo diseñado con los principios de Material Design, que utiliza Tailwind CSS para el estilo, la compatibilidad con temas oscuros y las animaciones receptivas.
Código HTML
<div class="container mx-auto px-4">
<h2 class="text-2xl font-bold my-6 text-gray-800 dark:text-gray-200">Columns Component</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=1" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 1</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=2" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 2</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the second column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=3" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 3</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the third column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=4" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 4</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the fourth column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=5" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 5</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the fifth column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=6" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 6</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the sixth column. It can contain any content.</p>
</div>
</div>
</div>
Componentes relacionados
Componente Columnas
Un componente de columnas minimalista con un esquema de color en escala de grises diseñado para interfaces de redes sociales. Cuenta con un diseño responsivo con soporte para temas oscuros.
Luxury_Job_Board_Columns_Component
Un componente de columna monocromática de lujo/premium para bolsas de trabajo y plataformas de desarrollo profesional. Cuenta con un diseño sofisticado con tipografía elegante, elementos de interfaz ricos, capacidad de respuesta completa y compatibilidad con el modo oscuro.
Componente Columnas
Un componente de columna simple y receptivo con un tema monocromático oscuro, adecuado para exhibir portafolios.