CCHub Logo CCHub Tailwind Collection
구성 요소 사용자 멘션 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 구성 요소

소셜 미디어 네트워킹 인터페이스를 위해 Neumorphism 및 Earth 톤으로 스타일링된 반응형 User Mentions 구성 요소로, 어두운 테마를 지원합니다.

열다

User Mentions 구성 요소

Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 사용자 언급 구성 요소. JavaScript는 필요하지 않으며 Tailwind 클래스가 있는 HTML만 필요합니다. 다크 모드의 경우 스타일링을 위해 Tailwind의 dark: 접두사를 사용합니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.

열다

사용자 언급 구성 요소 - 스큐어모피즘

사용자는 스큐어모피즘 디자인, 반응형 효과 및 어두운 테마 지원이 있는 구성 요소를 언급하며 tailwind css와 함께 html만 사용합니다. 자바 스크립트가 필요하지 않습니다.

열다