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>관련 구성 요소
사용자 언급 구성 요소 - 스큐어모피즘
사용자는 스큐어모피즘 디자인, 반응형 효과 및 어두운 테마 지원이 있는 구성 요소를 언급하며 tailwind css와 함께 html만 사용합니다. 자바 스크립트가 필요하지 않습니다.
User Mentions 구성 요소
레트로/빈티지 스타일과 유사한 색 구성표로 디자인된 반응형 User Mentions 구성 요소는 다크 모드를 지원합니다. 소셜 미디어 인터페이스에 적합한 사용자 아바타, 이름 및 메시지 텍스트가 특징입니다.
User Mentions 구성 요소
User Mentions 컴포넌트는 블러 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하는 Glassmorphism 스타일로 디자인되었습니다. 여기에는 어두운 테마 지원이 포함되어 있으며 반응형이므로 전자 상거래 웹 사이트에 적합합니다.