Componente Columnas
Un componente de columnas receptivo diseñado con una estética retro / vintage, que admite temas claros y oscuros. Cuenta con imágenes de marcador de posición y avatares de picsum.photos y randomuser.me respectivamente.
Código HTML
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200 mb-8">Retro Columns</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Random placeholder image">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 1</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel risus vitae nisl euismod aliquam.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-gray-200">John Doe</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Random placeholder image">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 2</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-gray-200">Jane Doe</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Random placeholder image">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 3</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-gray-200">John Smith</p>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Retro_Industrial_Columns_Component
Un componente de columnas complejo, vibrante y de estilo retro/vintage para empresas manufactureras/industriales, con una estética de los años 80/90 con soporte para modo oscuro y capacidad de respuesta total.
Componente Columnas
Un componente de columnas diseñado con el estilo Glassmorphism, colores vibrantes y un diseño simple, adecuado para un tablero.