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.
Código HTML
<div class="container mx-auto p-6">
<h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Brutalist Columns Component</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 1</h2>
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, ratione.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/201" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 2</h2>
<p class="text-gray-700 dark:text-gray-300">Animi, cupiditate! Doloremque aperiam sit perspiciatis quam.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/202" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 3</h2>
<p class="text-gray-700 dark:text-gray-300">Qui facere, necessitatibus quos aut eius optio deserunt.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/203" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 4</h2>
<p class="text-gray-700 dark:text-gray-300">Aliquam explicabo, at velit? Voluptate, facere voluptatem?</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/204" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 5</h2>
<p class="text-gray-700 dark:text-gray-300">Adipisci veniam, nobis porro repellat quo beatae impedit?</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/205" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 6</h2>
<p class="text-gray-700 dark:text-gray-300">Perferendis est provident, voluptatum dolor cumque atque.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Componente Columnas
Un componente de columnas responsivo con pequeñas animaciones atractivas, adecuado para el comercio electrónico con un tema oscuro.
Componente Columnas
Un componente de columnas de estilo Material Design con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.