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

User Mentions 구성 요소

반응형 사용자는 Tailwind CSS를 지원하는 다크 모드용으로 설계된 구성 요소를 언급합니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 text-white p-4 rounded-lg shadow-lg">
    <h2 class="text-lg font-semibold mb-2">Mentions</h2>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">John Doe</p>
            <p class="text-gray-400 text-sm">@johndoe</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Jane Smith</p>
            <p class="text-gray-400 text-sm">@janesmith</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Mike Johnson</p>
            <p class="text-gray-400 text-sm">@mikejohnson</p>
        </div>
    </div>
    <a href="#" class="text-blue-400 hover:underline">View more mentions</a>
</div>
<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
        }
    }
</style>

관련 구성 요소

User Mentions 구성 요소

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

열다

User Mentions 구성 요소

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

열다

User Mentions 구성 요소

스큐어모픽 사용자는 Tailwind CSS를 사용하여 반응형 효과와 어두운 테마 지원을 특징으로 하는 실제 요소를 모방하도록 설계된 구성 요소를 언급합니다.

열다