Disposition brutaliste de la grille
Un composant de mise en page de grille réactif doté d’un style de conception brutaliste avec un contraste élevé, des mises en page inhabituelles et une prise en charge du thème sombre.
HTML Code
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 1</h2>
<p class="text-gray-700 dark:text-gray-300">This is a description for the first block. It's intentionally raw and bold.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 2</h2>
<p class="text-gray-700 dark:text-gray-300">This is a description for the second block. Explore the unusual layout!</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/200/200?random=3" alt="Random Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 3</h2>
<p class="text-gray-700 dark:text-gray-300">A bold statement piece in the grid. Unconventional and striking.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/200/200?random=4" alt="Random Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 4</h2>
<p class="text-gray-700 dark:text-gray-300">Another block to emphasize the raw beauty of brutalism.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/200/200?random=5" alt="Random Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 5</h2>
<p class="text-gray-700 dark:text-gray-300">Each block tells a story through its design and layout.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/200/200?random=6" alt="Random Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 6</h2>
<p class="text-gray-700 dark:text-gray-300">Exploring textures and contrasts in brutalist design.</p>
</div>
</div>
</div>
</div>
<style>
.dark .border-gray-300 { border-color: gray; }
.dark .text-gray-700 { color: #e5e7eb; }
</style>Composants associés
Composant de mise en page de grille
Un composant de mise en page de grille réactif avec un design rétro/vintage, avec une esthétique nostalgique des années 80/90. Le composant comprend des images d’espace réservé et des avatars avec prise en charge du mode sombre.
Composant de mise en page de grille 3D pour portfolio
Un composant de mise en page de grille complexe, réactif et de style 3D pour les portfolios utilisant des couleurs complémentaires, avec prise en charge du mode sombre et des images de picsum.photos.
Composant de disposition de grille de skeuomorphisme
Composant de mise en page de grille Skeuomorphism avec effets réactifs et prise en charge du thème sombre.