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 구성 요소

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

열다

User Mentions 구성 요소

사용자는 Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 전자 상거래를 위한 Glassmorphism 스타일, 파스텔 색 구성표 및 복잡한 복잡성 수준이 있는 구성 요소를 언급합니다.

열다

User Mentions 구성 요소

User Mentions 컴포넌트는 블러 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하는 Glassmorphism 스타일로 디자인되었습니다. 여기에는 어두운 테마 지원이 포함되어 있으며 반응형이므로 전자 상거래 웹 사이트에 적합합니다.

열다