Componente Colonne Brutaliste
Un componente di colonne complesso in stile brutalista, con una combinazione di colori monocromatica, adatto per il consumo di blog o contenuti. Il design presenta un contrasto elevato, layout insoliti e supporta la modalità scura.
Codice 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>Componenti correlati
Componente Colonne
Componente Colonne reattive con stile Glassmorphism, combinazione di colori triadica, livello di complessità semplice per scopi aziendali/aziendali, include il supporto per la modalità oscura.
Neumorfismo dei componenti delle colonne
Neumorfismo dei componenti delle colonne: uno stile dell'interfaccia utente morbido che crea elementi che sembrano essere estrusi dallo sfondo utilizzando ombre sottili. Questo componente è reattivo e supporta il tema scuro. Non è necessario alcun codice JavaScript. Per la modalità scura, il supporto CSS è sufficiente.
Retro_Industrial_Columns_Component
Un componente a colonne complesso, vibrante, in stile retrò/vintage per aziende manifatturiere/industriali, caratterizzato da un'estetica anni '80/'90 con supporto alla modalità scura e piena reattività.