CCHub Logo CCHub Tailwind Collection
コンポーネント グリッドレイアウト グリッド・レイアウト・コンポーネント 29

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

ブルータリズムスタイルで設計されたレスポンシブグリッドレイアウトコンポーネントで、高コントラストと珍しいレイアウトで、Tailwind CSSによるダークモードをサポートします。

プレビュー

HTMLコード 

<div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
  <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100">Brutalist Grid Layout</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 1</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 2</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=3" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 3</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=4" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 4</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=5" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 5</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=6" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 6</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
  </div>
</div>

関連コンポーネント

Skeuomorphismの鮮やかなグリッドレイアウト

ダークモードをサポートするレスポンシブグリッドレイアウトコンポーネント、スキューモーフィズムデザイン、鮮やかな色、適度な複雑さ、ポートフォリオに適しています。

開ける

FinancialGridWithインタラクション

金融/銀行インターフェース用のレスポンシブグリッドレイアウトコンポーネントで、高コントラストの色と微妙なホバーマイクロインタラクションが特徴です。ダークモードをサポートし、適度な複雑さに対応するように設計されています。

開ける

グラデーショングリッド予約レイアウト

予約/予約システム用の複雑で応答性の高いグリッドレイアウトコンポーネントで、トライアドカラーグラデーション、スムーズなトランジション、ダークモードのサポートを特長としています。複数のインタラクティブな要素で設計されています。

開ける