グリッドレイアウトコンポーネント
マテリアル デザインの原則に従ったレスポンシブ グリッド レイアウト コンポーネントで、Tailwind CSS を使用したシャドウ エフェクトとダーク モードのサポートが特徴です。
HTMLコード
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Material Design Grid Layout</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-48 object-cover" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/200/300?2" alt="Random Image" class="w-full h-48 object-cover" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/200/300?3" alt="Random Image" class="w-full h-48 object-cover" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/200/300?4" alt="Random Image" class="w-full h-48 object-cover" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 4</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/200/300?5" alt="Random Image" class="w-full h-48 object-cover" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 5</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/200/300?6" alt="Random Image" class="w-full h-48 object-cover" />
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 6</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
</div>
</div>
</div>
</div>
<!-- Tailwind CSS styles for dark mode support -->
<style>
@media (prefers-color-scheme: dark) {
.dark .bg-white { background-color: #1f2937; /* Gray-800 */ }
.dark .text-gray-700 { color: #e5e7eb; /* Gray-200 */ }
.dark .text-gray-600 { color: #d1d5db; /* Gray-400 */ }
}
</style>