CCHub Logo CCHub Tailwind Collection
구성 요소 사용자 멘션 User Mentions 구성 요소

User Mentions 구성 요소

단순하고 미니멀한 사용자는 다크 모드를 지원하는 구성 요소를 언급합니다. 클릭 가능한 사용자 아바타 및 이름은 플랙스박스 레이아웃에 표시됩니다. 구성 요소는 반응형이며 다양한 화면 크기에 맞게 조정됩니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
  <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Mentioned Users</h3>
  <div class="flex flex-wrap gap-4">
    <div class="flex items-center space-x-2">
      <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">John Doe</a>
    </div>
    <div class="flex items-center space-x-2">
      <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Jane Smith</a>
    </div>
    <div class="flex items-center space-x-2">
      <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Peter Jones</a>
    </div>
  </div>
</div>

관련 구성 요소

User Mentions 구성 요소

반응형 사용자는 Tailwind CSS를 사용하는 비즈니스 웹사이트용으로 설계된 어두운 테마 지원 및 마이크로 인터랙션이 있는 구성 요소를 언급합니다.

열다

User Mentions 구성 요소

레트로/빈티지 스타일과 유사한 색 구성표로 디자인된 반응형 User Mentions 구성 요소는 다크 모드를 지원합니다. 소셜 미디어 인터페이스에 적합한 사용자 아바타, 이름 및 메시지 텍스트가 특징입니다.

열다

User Mentions 구성 요소

User Mentions 컴포넌트는 블러 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하는 Glassmorphism 스타일로 디자인되었습니다. 여기에는 어두운 테마 지원이 포함되어 있으며 반응형이므로 전자 상거래 웹 사이트에 적합합니다.

열다