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

User Mentions 구성 요소

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

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-800 py-8 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">User Mentions</h2>
    <div class="space-y-4">
      <!-- Mention 1 -->
      <div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">Jane Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Mentioned you in a post</p>
        </div>
        <div class="ml-auto">
          <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
        </div>
      </div>

      <!-- Mention 2 -->
      <div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">John Smith</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Replied to your comment</p>
        </div>
        <div class="ml-auto">
           <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
        </div>
      </div>

      <!-- Mention 3 -->
       <div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">Jessica Williams</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Liked your photo</p>
        </div>
        <div class="ml-auto">
           <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

User Mentions 구성 요소

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

열다

User Mentions 구성 요소

복잡하고 반응이 빠른 사용자는 수채화/예술적 스타일, 멋진 중립적인 색 구성표 및 어두운 모드 지원을 갖춘 교육 플랫폼용 구성 요소를 언급합니다. 사용자 아바타, 이름, 역할 및 미묘한 수채화 배경 효과가 특징입니다.

열다

User Mentions 구성 요소

복잡하고 단색의 산업 스타일 사용자는 원자재, 노출된 요소 및 실용적인 미학을 특징으로 하는 여행/관광 웹 사이트의 구성 요소를 언급합니다. 완벽하게 반응하며 다크 모드를 지원합니다.

열다