User Mentions 구성 요소
간단한 User Mentions 구성 요소는 비즈니스 및 기업 웹 사이트에 적합한 회색 음영 구성표의 브루탈리즘 스타일로 설계되었습니다. 여기에는 아바타와 함께 사용자 언급이 포함되며 어두운 테마 지원으로 반응합니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-black dark:text-white">User Mentions</h2>
<ul class="mt-4 space-y-4">
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
<p class="text-gray-800 dark:text-gray-200">@john_doe</p>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
<p class="text-gray-800 dark:text-gray-200">@jane_smith</p>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
<p class="text-gray-800 dark:text-gray-200">@mark_twain</p>
</li>
</ul>
<button class="mt-4 px-4 py-2 bg-gray-800 dark:bg-white text-white dark:text-gray-800 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none">See More Mentions</button>
</div>
관련 구성 요소
User Mentions 구성 요소
복잡하고 반응이 빠른 사용자는 수채화/예술적 스타일, 멋진 중립적인 색 구성표 및 어두운 모드 지원을 갖춘 교육 플랫폼용 구성 요소를 언급합니다. 사용자 아바타, 이름, 역할 및 미묘한 수채화 배경 효과가 특징입니다.
User Mentions 구성 요소
복잡한 사용자는 자주색/보라색 그라디언트 색 구성표와 부드러운 전환을 특징으로 하는 CRM/비즈니스 도구용 구성 요소를 언급합니다. 다크 모드 지원으로 완벽하게 반응합니다.