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サイトに適しています。アバターを使用したユーザーメンションが含まれ、ダークテーマのサポートにより応答性があります。

開ける

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

Glassmorphism スタイルでデザインされた User Mentions コンポーネントは、ぼかし効果のあるすりガラスのような半透明の要素が特徴です。ダークテーマのサポートが含まれており、レスポンシブであるため、eコマースWebサイトに適しています。

開ける

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

ユーザーは、Tailwind CSSを使用して、レスポンシブデザインとダークテーマのサポートを備えた、Glassmorphismスタイル、パステルカラースキーム、およびEコマースの複雑な複雑さレベルのコンポーネントに言及します。

開ける