Componente Layout griglia 7
Un componente di layout a griglia reattivo progettato in stile Brutalismo con Tailwind CSS, con supporto per temi scuri e immagini segnaposto casuali.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 p-8">
<h1 class="text-4xl font-extrabold text-black dark:text-white mb-6">Brutalism Grid Layout</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
<img src="https://picsum.photos/200/300?random=1" alt="Random Image" class="rounded-lg mb-4">
<h2 class="text-xl font-bold text-black dark:text-white">Item 1</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description of item 1.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
<img src="https://picsum.photos/200/300?random=2" alt="Random Image" class="rounded-lg mb-4">
<h2 class="text-xl font-bold text-black dark:text-white">Item 2</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description of item 2.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
<img src="https://picsum.photos/200/300?random=3" alt="Random Image" class="rounded-lg mb-4">
<h2 class="text-xl font-bold text-black dark:text-white">Item 3</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description of item 3.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
<img src="https://picsum.photos/200/300?random=4" alt="Random Image" class="rounded-lg mb-4">
<h2 class="text-xl font-bold text-black dark:text-white">Item 4</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description of item 4.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
<img src="https://picsum.photos/200/300?random=5" alt="Random Image" class="rounded-lg mb-4">
<h2 class="text-xl font-bold text-black dark:text-white">Item 5</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description of item 5.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
<img src="https://picsum.photos/200/300?random=6" alt="Random Image" class="rounded-lg mb-4">
<h2 class="text-xl font-bold text-black dark:text-white">Item 6</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description of item 6.</p>
</div>
</div>
</div>Componenti correlati
Griglia sanitaria vibrante ispirata alla carta
Un semplice componente di layout a griglia ispirato alla carta/stampa con colori vivaci, progettato per applicazioni mediche/sanitarie. È completamente reattivo, include il supporto per la modalità oscura e utilizza l'HTML semantico.
Layout della griglia di gioco Art Déco
Un layout reattivo della griglia di gioco ispirato all'Art Déco con motivi geometrici, colori in scala di grigi ed elementi interattivi. Progettato per siti Web e interfacce di gioco, con supporto per la modalità oscura.
Monospace/Developer - Componente di layout della griglia musicale/audio
Un componente di layout a griglia semplice e reattivo per piattaforme musicali/audio, progettato con un'estetica monospace/developer che utilizza neutri caldi. Include il supporto per la modalità oscura.