CCHub Logo CCHub Tailwind Collection
コンポーネント ユーザーメンション ユーザーメンションコンポーネント

ユーザーメンションコンポーネント

ソーシャルメディアネットワーキングインターフェイス用のニューモーフィズムとアーストーンでスタイル化されたレスポンシブユーザーメンションコンポーネントで、ダークテーマのサポートを備えています。

プレビュー

HTMLコード 

<div class="max-w-md mx-auto py-8">
    <!-- Title -->
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h2>

    <!-- Mentions List -->
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-5">
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-gray-500 dark:text-gray-400">@john_doe</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
                <p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">Mike Taylor</p>
                <p class="text-gray-500 dark:text-gray-400">@mike_taylor</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
    </div>
</div>

関連コンポーネント

ユーザーメンションコンポーネント

複雑で単色のインダストリアルスタイルのユーザーが、原材料、露出した要素、実用的な美学を特徴とする旅行/観光Webサイトのコンポーネントについて言及しています。完全にレスポンシブで、ダークモードをサポートしています。

開ける

ユーザーメンションコンポーネント

複雑なユーザーがCRM/ビジネスツールのコンポーネントについて言及し、紫/紫のグラデーションの配色とスムーズな移行が特徴です。ダークモードのサポートにより完全にレスポンシブ。

開ける

ユーザーメンションコンポーネント

シンプルでミニマリストのユーザーは、ダークモードをサポートするコンポーネントについて言及しています。クリック可能なユーザーのアバターと名前は、フレックスボックスレイアウトで表示されます。このコンポーネントは応答性が高く、さまざまな画面サイズに適応します。

開ける