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

レトロ/ビンテージスタイルと類似の配色でデザインされたレスポンシブなユーザーメンションコンポーネントで、ダークモードをサポートします。ソーシャルメディアインターフェースに適したユーザーのアバター、名前、メッセージテキストを備えています。

プレビュー

HTMLコード

<div class="p-4 bg-gradient-to-r from-yellow-400 to-pink-500 dark:from-yellow-600 dark:to-pink-700 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold text-white mb-4">User Mentions</h2>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">John Doe</span>
            <p class="text-gray-700 dark:text-gray-400">Mentioned you in a post</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
        <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">Jane Smith</span>
            <p class="text-gray-700 dark:text-gray-400">Commented on your photo</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">Michael Brown</span>
            <p class="text-gray-700 dark:text-gray-400">Started following you</p>
        </div>
    </div>
</div>

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

プレビュー

HTMLコード

関連コンポーネント

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

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

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