User Mentions 구성 요소
Tailwind CSS를 사용하여 3D 디자인, 반응형 효과 및 어두운 테마를 지원하는 사용자 멘션 구성 요소입니다.
HTML 코드
<div class="flex items-center space-x-4 p-4 bg-white rounded-lg shadow-xl transition-transform transform hover:scale-105 dark:bg-gray-800">
<img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
<span class="inline-block bg-blue-500 text-white text-xs px-3 py-1 rounded-full shadow-md dark:bg-blue-600">
Mentioned
</span>
</div>
관련 구성 요소
User Mentions 구성 요소
Glassmorphism 디자인, 응답성 및 어두운 테마를 지원하는 Tailwind CSS를 사용하는 User Mentions 구성 요소.
User Mentions 구성 요소
레트로/빈티지 스타일과 유사한 색 구성표로 디자인된 반응형 User Mentions 구성 요소는 다크 모드를 지원합니다. 소셜 미디어 인터페이스에 적합한 사용자 아바타, 이름 및 메시지 텍스트가 특징입니다.
User Mentions 구성 요소
반응형 사용자는 Tailwind CSS를 사용하는 비즈니스 웹사이트용으로 설계된 어두운 테마 지원 및 마이크로 인터랙션이 있는 구성 요소를 언급합니다.