구성 요소 사용자 멘션 User Mentions 구성 요소

User Mentions 구성 요소

단순하고 미니멀한 사용자는 블로그 및 콘텐츠 소비를 위한 구성 요소를 언급하며, 어두운 테마를 지원하는 반응형 디자인을 특징으로 합니다.

미리 보기

HTML 코드

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">User Mentions</h2>
    <ul class="mt-4 space-y-4">
        <li class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">John Doe</h3>
                <p class="text-gray-500 dark:text-gray-400">@john_doe</p>
            </div>
        </li>
        <li class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Jane Smith</h3>
                <p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
            </div>
        </li>
        <li class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Mike Johnson</h3>
                <p class="text-gray-500 dark:text-gray-400">@mike_johnson</p>
            </div>
        </li>
    </ul>
    <div class="mt-6">
        <button class="bg-blue-500 text-white rounded-lg py-2 px-4 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800">View More</button>
    </div>
</div>

관련 구성 요소

User Mentions 구성 요소

단순하고 미니멀한 사용자는 다크 모드를 지원하는 구성 요소를 언급합니다. 클릭 가능한 사용자 아바타 및 이름은 플랙스박스 레이아웃에 표시됩니다. 구성 요소는 반응형이며 다양한 화면 크기에 맞게 조정됩니다.

열다

사용자 언급 구성 요소 15

머티리얼 디자인 스타일로 사용자 멘션을 표시하는 웹 구성 요소로, 반응형 효과와 어두운 테마 지원을 제공합니다.

열다

User Mentions 구성 요소

반응형 사용자는 Tailwind CSS를 사용하는 비즈니스 웹사이트용으로 설계된 어두운 테마 지원 및 마이크로 인터랙션이 있는 구성 요소를 언급합니다.

열다