User Mentions 구성 요소
단순하고 미니멀한 사용자는 블로그 및 콘텐츠 소비를 위한 구성 요소를 언급하며, 어두운 테마를 지원하는 반응형 디자인을 특징으로 합니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">User Mentions</h2>
<ul class="mt-4 space-y-4">
<li class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">John Doe</h3>
<p class="text-gray-500 dark:text-gray-400">@john_doe</p>
</div>
</li>
<li class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Jane Smith</h3>
<p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
</div>
</li>
<li class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Mike Johnson</h3>
<p class="text-gray-500 dark:text-gray-400">@mike_johnson</p>
</div>
</li>
</ul>
<div class="mt-6">
<button class="bg-blue-500 text-white rounded-lg py-2 px-4 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800">View More</button>
</div>
</div>
관련 구성 요소
User Mentions 구성 요소
단순하고 미니멀한 사용자는 다크 모드를 지원하는 구성 요소를 언급합니다. 클릭 가능한 사용자 아바타 및 이름은 플랙스박스 레이아웃에 표시됩니다. 구성 요소는 반응형이며 다양한 화면 크기에 맞게 조정됩니다.
User Mentions 구성 요소
반응형 사용자는 Tailwind CSS를 사용하는 비즈니스 웹사이트용으로 설계된 어두운 테마 지원 및 마이크로 인터랙션이 있는 구성 요소를 언급합니다.