ブルータリズムのグリッドレイアウト

<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>