HTML 代码
<div class="container mx-auto p-4 bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-4 border-stone-900 dark:border-stone-100">
<div class="p-4 bg-stone-300 dark:bg-stone-700 border-4 border-stone-900 dark:border-stone-100">
<h2 class="text-xl font-bold mb-2">Section 1</h2>
<p>This is the first section of our brutalist grid layout. It features a strong border and contrasting background colors for visual impact.</p>
</div>
<div class="p-4 bg-stone-300 dark:bg-stone-700 border-4 border-stone-900 dark:border-stone-100">
<h2 class="text-xl font-bold mb-2">Section 2</h2>
<p>The second section maintains the same bold styling, showcasing how we can use simple elements to create a powerful design aesthetic.</p>
</div>
<div class="p-4 bg-stone-300 dark:bg-stone-700 border-4 border-stone-900 dark:border-stone-100">
<h2 class="text-xl font-bold mb-2">Section 3</h2>
<p>Our third section continues the theme, demonstrating the versatility of this simple grid structure for organizing content effectively.</p>
</div>
<div class="p-4 bg-stone-300 dark:bg-stone-700 border-4 border-stone-900 dark:border-stone-100">
<h2 class="text-xl font-bold mb-2">Section 4</h2>
<p>The final section completes the layout, reinforcing the brutalist design principles with stark contrasts and clear visual separation.</p>
</div>
</div>
</div>