コンポーネント グリッドレイアウト マテリアル デザイン グリッド レイアウト

マテリアル デザイン グリッド レイアウト

マテリアルデザインのスタイル設定を備えたレスポンシブグリッドレイアウトコンポーネントで、シャドウエフェクトやダークモードのサポートなど。

プレビュー

HTMLコード

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/400/300" alt="Placeholder Image 1">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 1. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/400/300" alt="Placeholder Image 2">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 2. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/400/300" alt="Placeholder Image 3">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 3. It provides details about the content.</p>
      </div>
    </div>
     <!-- Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum4/400/300" alt="Placeholder Image 4">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 4. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum5/400/300" alt="Placeholder Image 5">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 5</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 5. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum6/400/300" alt="Placeholder Image 6">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 6</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 6. It provides details about the content.</p>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

グリッドレイアウトコンポーネント

スキューモーフィックスタイルで設計されたソーシャルメディアインターフェース用のレスポンシブグリッドレイアウトコンポーネントで、トライアドカラー、複数のインタラクティブ要素、ダークテーマのサポートが特徴です。

開ける

グリッドレイアウトコンポーネント - 金融/銀行

金融/銀行アプリケーション向けのレスポンシブグリッドレイアウトコンポーネントで、温かみのあるニュートラルとダークモードのサポートを備えたクリーンなマテリアルデザインの美学が特徴です。

開ける

グリッドレイアウトコンポーネント

レトロ/ビンテージなデザインのレスポンシブグリッドレイアウトコンポーネントで、ノスタルジックな80年代/90年代の美学が特徴です。このコンポーネントには、ダークモードをサポートするプレースホルダー画像とアバターが含まれています。

開ける