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
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 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.
Componente Columnas
Componente de columnas para un tablero, con un diseño 3D con colores complementarios. Incluye tres columnas responsivas con un diseño simple, compatibilidad con el modo oscuro y utiliza Tailwind CSS para el estilo. No se incluye JavaScript.