CCHub Logo CCHub Tailwind Collection
コンポーネント 列 列コンポーネント

列コンポーネント

ソーシャルネットワーキングインターフェイス用に設計されたグレースケールの配色を備えたミニマリストの列コンポーネント。ダークテーマをサポートするレスポンシブレイアウトが特徴です。

プレビュー

HTMLコード 

<div class="container mx-auto p-4 md:p-8">
    <h1 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">User Profiles</h1>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
            <img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400 text-center">@johndoe</p>
            <p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Random Image">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
            <img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Jane Smith</h2>
            <p class="text-gray-600 dark:text-gray-400 text-center">@janesmith</p>
            <p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=2" alt="Random Image">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
            <img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Michael Johnson</h2>
            <p class="text-gray-600 dark:text-gray-400 text-center">@michaeljohnson</p>
            <p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=3" alt="Random Image">
        </div>
    </div>
</div>

関連コンポーネント

列コンポーネント

レスポンシブ エフェクトと Tailwind CSS を使用したダーク テーマのサポートを備えたマテリアル デザイン スタイルの Columns コンポーネント。

開ける

列コンポーネント

Glassmorphismで設計されたレスポンシブカラムコンポーネントで、ビジネス/企業Webサイトにトライアドカラースキームを使用しています。すりガラスのような半透明の要素、ぼかし効果が特徴で、ダークモードに適しています。

開ける

Brutalist Columns コンポーネント

ブルータリズムのデザインでスタイル化された複雑な列コンポーネントで、単色の配色で、ブログやコンテンツの消費に適しています。このデザインは、高コントラスト、珍しいレイアウトを特徴とし、ダークモードをサポートしています。

開ける