Composante des colonnes brutalistes
Un composant complexe de colonnes au design brutaliste, avec une palette de couleurs monochromatiques, adapté à la consommation de blogs ou de contenu. Le design présente un contraste élevé, des mises en page inhabituelles et prend en charge le mode sombre.
HTML Code
<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>Composants associés
Colonnes Composant 49
Un composant de colonnes réactif avec un design skeuomorphe imitant les éléments du monde réel, avec la prise en charge du thème sombre et utilisant Tailwind CSS.
Composant Colonnes
Colonnes en niveaux de gris réactives de style 3D pour une page de portfolio, avec prise en charge du mode sombre.
Composant Colonnes
Un composant de colonnes réactives avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.