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.
Código HTML
<div class="container mx-auto p-4 md:p-8">
<h1 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">User Profiles</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400 text-center">@johndoe</p>
<p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Random Image">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-400 text-center">@janesmith</p>
<p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=2" alt="Random Image">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Michael Johnson</h2>
<p class="text-gray-600 dark:text-gray-400 text-center">@michaeljohnson</p>
<p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=3" alt="Random Image">
</div>
</div>
</div>Componentes relacionados
Componente Columnas
Columnas responsivas en escala de grises de estilo 3D para una página de portafolio, con soporte para modo oscuro.
Componente Columnas
Un componente de columnas diseñado con el estilo Glassmorphism, colores vibrantes y un diseño simple, adecuado para un tablero.
Componente Columnas
Un componente de columnas responsivo diseñado para blogs o consumo de contenido. Presenta un diseño plano minimalista con un esquema de color análogo y soporte para temas oscuros.