CCHub Logo CCHub Tailwind Collection
コンポーネント ユーザープロファイル ユーザープロファイルコンポーネント

ユーザープロファイルコンポーネント

Tailwind CSS を使用してブルータリズム スタイルでデザインされたユーザー プロファイル コンポーネントで、単色の配色が特徴で、ソーシャル ネットワーキングのインターフェイスを提供します。ダークモードをサポートし、応答性に優れています。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center bg-gray-900 p-6 rounded-lg shadow-lg dark:bg-gray-800">
    <h1 class="text-4xl text-white font-bold mb-4">User Profiles</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
            <img src="https://picsum.photos/200/300?random=1" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
            <div class="p-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                <h2 class="text-2xl text-white font-semibold text-center">John Doe</h2>
                <p class="text-gray-400 text-center mb-2">@johndoe</p>
                <p class="text-gray-300 text-center">Web Developer<br>Based in San Francisco</p>
                <button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
            </div>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
            <img src="https://picsum.photos/200/300?random=2" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
            <div class="p-4">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                <h2 class="text-2xl text-white font-semibold text-center">Jane Smith</h2>
                <p class="text-gray-400 text-center mb-2">@janesmith</p>
                <p class="text-gray-300 text-center">Graphic Designer<br>Based in New York</p>
                <button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
            </div>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
            <img src="https://picsum.photos/200/300?random=3" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
            <div class="p-4">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                <h2 class="text-2xl text-white font-semibold text-center">Alex Johnson</h2>
                <p class="text-gray-400 text-center mb-2">@alexjohnson</p>
                <p class="text-gray-300 text-center">Content Creator<br>Based in Austin</p>
                <button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
            </div>
        </div>
    </div>
</div>

関連コンポーネント

ユーザープロファイルコンポーネント

Tailwind CSS を使用したレスポンシブ ユーザー プロファイル コンポーネントで、マテリアル デザインの影響を受け、単色の配色が施されています。ダークモードをサポートし、ユーザー情報、統計、および最近のアクティビティを表示します。

開ける

ユーザープロファイルコンポーネント

ダッシュボードのレスポンシブ ユーザー プロファイル コンポーネントで、ダーク モードのパステル テーマがあり、Tailwind CSS で構築されています。ユーザーのアバター、名前、役割、簡単な説明、フォローボタンが表示されます。このデザインは、さまざまな画面サイズに適応し、システム設定に基づいてダークモードをサポートします。

開ける

ユーザープロファイルコンポーネント

トライアドカラースキームのブルータリズムスタイルでデザインされたユーザープロファイルコンポーネントで、ブログ/コンテンツの消費に適した適度な複雑さと、ダークテーマをサポートするレスポンシブデザインが特徴です。

開ける