Componente Columnas
Un componente de columnas responsivo diseñado para el modo oscuro con Tailwind CSS, con marcadores de posición de avatar e imagen.
Código HTML
<div class="bg-gray-900 text-white p-6">
<h2 class="text-2xl font-bold mb-4">Columns Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Column 1 -->
<div class="bg-gray-800 p-4 rounded shadow-lg">
<img src="https://picsum.photos/200/100" alt="Placeholder Image" class="rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-semibold">User One</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
</div>
<!-- Column 2 -->
<div class="bg-gray-800 p-4 rounded shadow-lg">
<img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-semibold">User Two</span>
</div>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<!-- Column 3 -->
<div class="bg-gray-800 p-4 rounded shadow-lg">
<img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-semibold">User Three</span>
</div>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
</div>
</div>
</div>Componentes relacionados
Columnas Componente 49
Un componente de columnas responsivo con un diseño esqueuomórfico que imita elementos del mundo real, con soporte para temas oscuros y uso de Tailwind CSS.
Componente Columnas Brutalistas
Un componente de columnas complejas con un diseño brutalista, con un esquema de color monocromático, adecuado para el blog o el consumo de contenido. El diseño presenta alto contraste, diseños inusuales y admite el modo oscuro.
Componente Columnas
Un componente de columnas responsivo diseñado con Glassmorphism, que utiliza un esquema de color triádico para un sitio web empresarial/corporativo. Cuenta con elementos translúcidos similares al vidrio esmerilado, efectos de desenfoque y es adecuado para el modo oscuro.