CCHub Logo CCHub Tailwind Collection
구성 요소 사용자 멘션 User Mentions 구성 요소

User Mentions 구성 요소

스큐어모픽 사용자는 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>

관련 구성 요소

User Mentions 구성 요소

간단하고 반응이 빠른 사용자는 Skeuomorphism 디자인, 유사한 색 구성표 및 다크 모드 지원이 있는 구성 요소를 언급합니다.

열다

User Mentions 구성 요소

사용자 언급 어두운 모드를 지원하는 구성 요소, 반응형 효과 및 어두운 테마 지원을 특징으로 합니다. 이미지에는 picsum.photos의 임의의 자리 표시자 이미지를 사용하고 아바타에는 randomuser.me 이미지를 사용합니다.

열다

User Mentions 구성 요소

Tailwind CSS를 사용하여 구축된 반응형 효과 및 어두운 테마 지원을 특징으로 하는 마이크로 인터랙션으로 설계된 User Mentions 구성 요소입니다.

열다