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 구성 요소
간단하고 반응이 빠른 사용자는 소셜 미디어 응용 프로그램에 적합한 생생한 glassmorphism 스타일의 구성 요소를 언급합니다. 다크 모드 지원이 포함됩니다.
User Mentions 구성 요소
사용자는 Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 전자 상거래를 위한 Glassmorphism 스타일, 파스텔 색 구성표 및 복잡한 복잡성 수준이 있는 구성 요소를 언급합니다.