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

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

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

プレビュー

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>

関連コンポーネント

ポートフォリオの 3D グリッドレイアウトコンポーネント

複雑でレスポンシブな 3D スタイルのグリッドレイアウトコンポーネントで、補色を使用したポートフォリオ用で、ダークモードと picsum.photos の画像がサポートされています。

開ける

アールデコ教育グリッド

教育プラットフォーム向けの複雑で応答性の高いグリッドレイアウトコンポーネントで、アールデコ調の幾何学模様と豊かな秋の色でスタイリングされています。ダークモードのサポートと複数のインタラクティブ要素が含まれています。

開ける

Travel_Booking_Grid_Layout_Component

企業/プロフェッショナルなデザイン、類似の配色、およびダークモードのサポートを備えた旅行予約Webサイト向けの複雑で応答性の高いグリッドレイアウトコンポーネント。宛先カード、検索入力、サイドバーを備えています。

開ける