User Mentions 구성 요소
Tailwind CSS를 사용하여 구축된 반응형 효과 및 어두운 테마 지원을 특징으로 하는 마이크로 인터랙션으로 설계된 User Mentions 구성 요소입니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Mentions</h2>
<ul class="list-disc pl-5">
<li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-white">@john_doe</span>
</li>
<li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
<img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-white">@jane_doe</span>
</li>
<li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-white">@mark_smith</span>
</li>
</ul>
<div class="mt-4">
<img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
</div>
</div>관련 구성 요소
User Mentions 구성 요소
사용자는 Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 전자 상거래를 위한 Glassmorphism 스타일, 파스텔 색 구성표 및 복잡한 복잡성 수준이 있는 구성 요소를 언급합니다.
User Mentions 구성 요소
사용자 언급 어두운 모드를 지원하는 구성 요소, 반응형 효과 및 어두운 테마 지원을 특징으로 합니다. 이미지에는 picsum.photos의 임의의 자리 표시자 이미지를 사용하고 아바타에는 randomuser.me 이미지를 사용합니다.