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

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

スキューモーフィックなユーザーが、現実世界の要素を模倣するように設計されたコンポーネントについて言及し、レスポンシブエフェクトとTailwind CSSを使用したダークテーマのサポートを特徴としています。

プレビュー

HTMLコード 

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 max-w-xl mx-auto mt-10">
    <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-4">Mentions</h2>
    <div class="flex flex-col gap-3">
        <div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
            <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div class="ml-4">
                <p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">@john_doe</p>
            </div>
        </div>
        <div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
            <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div class="ml-4">
                <p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">@jane_smith</p>
            </div>
        </div>
        <div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
            <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar">
            <div class="ml-4">
                <p class="font-medium text-gray-800 dark:text-gray-200">Michael Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">@michael_j</p>
            </div>
        </div>
    </div>
</div>

関連コンポーネント

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

Tailwind CSS を使用して構築された、マイクロインタラクションで設計された、レスポンシブ効果とダークテーマのサポートを特徴とする User Mentions コンポーネント。

開ける

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

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

開ける

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

Neumorphismスタイルのユーザーは、レスポンシブデザインとダークモードのサポートを備えたポートフォリオWebサイトにアースカラーを使用したコンポーネントについて言及しています。

開ける