User Mentions 구성 요소
사용자 언급 : 반응 형 디자인과 어두운 모드 지원으로 Glassmorphism 스타일을 구현하는 구성 요소.
HTML 코드
<div class="flex items-center p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20 transition-all duration-300 ease-in-out">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-white font-semibold text-lg dark:text-white">John Doe</p>
<p class="text-gray-200 text-sm dark:text-gray-300">@johndoe</p>
</div>
<button class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
Follow
</button>
</div>
관련 구성 요소
User Mentions 구성 요소
단순하고 미니멀한 사용자는 다크 모드를 지원하는 구성 요소를 언급합니다. 클릭 가능한 사용자 아바타 및 이름은 플랙스박스 레이아웃에 표시됩니다. 구성 요소는 반응형이며 다양한 화면 크기에 맞게 조정됩니다.
User Mentions 구성 요소
Glassmorphism 디자인, 응답성 및 어두운 테마를 지원하는 Tailwind CSS를 사용하는 User Mentions 구성 요소.