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

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

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

プレビュー

HTMLコード 

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-6 bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
        <img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image 1" class="w-full h-36 object-cover">
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Retro 1</h2>
            <p class="text-gray-600 dark:text-gray-400">This is a retro-themed description for the first item in the grid.</p>
            <div class="flex items-center mt-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-sm text-gray-700 dark:text-gray-300">User 1</span>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
        <img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image 2" class="w-full h-36 object-cover">
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Retro 2</h2>
            <p class="text-gray-600 dark:text-gray-400">This is a retro-themed description for the second item in the grid.</p>
            <div class="flex items-center mt-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-sm text-gray-700 dark:text-gray-300">User 2</span>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
        <img src="https://picsum.photos/300/200?random=3" alt="Placeholder Image 3" class="w-full h-36 object-cover">
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Retro 3</h2>
            <p class="text-gray-600 dark:text-gray-400">This is a retro-themed description for the third item in the grid.</p>
            <div class="flex items-center mt-2">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-sm text-gray-700 dark:text-gray-300">User 3</span>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
        <img src="https://picsum.photos/300/200?random=4" alt="Placeholder Image 4" class="w-full h-36 object-cover">
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Retro 4</h2>
            <p class="text-gray-600 dark:text-gray-400">This is a retro-themed description for the fourth item in the grid.</p>
            <div class="flex items-center mt-2">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-sm text-gray-700 dark:text-gray-300">User 4</span>
            </div>
        </div>
    </div>
</div>

関連コンポーネント

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

シンプルですっきりとしたデザインが特徴のミニマリストグリッドレイアウトコンポーネントで、レスポンシブ効果とダークテーマのサポートを備えています。picsum.photosと randomuser.me のプレースホルダー画像とアバターを利用します。

開ける

レトロ/ビンテージEコマースグリッドレイアウト

レトロ/ビンテージとパステル調のデザインの、レスポンシブでダークテーマに対応したグリッドレイアウトコンポーネントで、eコマース製品のディスプレイを対象としています。Tailwind CSSを使用し、モック画像とアバターが含まれています。

開ける

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

マテリアル デザインの原則に従ったレスポンシブ グリッド レイアウト コンポーネントで、Tailwind CSS を使用したシャドウ エフェクトとダーク モードのサポートが特徴です。

開ける