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
Grille de tableau de bord Neumorphism
Composant de tableau de bord de mise en page de grille de neumorphisme avec schéma de couleurs complémentaires
Monospace_Developer_Food_Grid_Layout
Un composant de mise en page de grille simple, sur le thème du monospace, pour les sites Web de restauration, avec un design épuré et une palette de couleurs monochromes avec prise en charge du mode sombre.
Composant de mise en page de grille cyberpunk
Un composant de mise en page de grille simple et réactif avec une esthétique cyberpunk, adapté aux sites Web d’événements ou de conférences. Présente des arrière-plans sombres, des accents de néon lumineux et une palette de couleurs triadiques. Inclut la prise en charge du mode sombre.