Komponente "Rasterlayout" 29
Eine reaktionsschnelle Grid-Layout-Komponente, die in einem brutalistischen Stil mit hohem Kontrast und ungewöhnlichen Layouts gestaltet ist und den Dunkelmodus mit Tailwind CSS unterstützt.
HTML-Code
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
<h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100">Brutalist Grid Layout</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/300?random=3" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 3</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/300?random=4" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 4</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/300?random=5" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 5</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/300?random=6" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 6</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
</div>
</div>
</div>Verwandte Komponenten
Layout des Materialdesign-Rasters
Eine reaktionsschnelle Rasterlayoutkomponente mit Material Design-Stil, einschließlich Schatteneffekten und Unterstützung für den Dunkelmodus.
Grid-Layout-Komponente - Finanzen/Banking
Eine reaktionsschnelle Grid-Layout-Komponente für Finanz-/Bankanwendungen mit einer klaren Material Design-Ästhetik mit warmen Neutraltönen und Unterstützung für den Dunkelmodus.
Retro/Vintage E-Commerce Raster Layout
Eine reaktionsschnelle, von dunklen Themen unterstützte Rasterlayout-Komponente mit Retro-/Vintage- und Pastelldesign, die für die Präsentation von E-Commerce-Produkten gedacht ist. Verwendet Tailwind CSS und enthält Mock-Bilder und Avatare.