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

User Mentions 구성 요소

사용자는 Tailwind CSS를 사용하여 단색 색 구성표, 단순한 레이아웃, 반응형 디자인 및 어두운 테마 지원을 특징으로 하는 대시보드의 구성 요소를 언급합니다.

미리 보기

HTML 코드 

<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h3>
  <div class="space-y-3">
    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@john_doe mentioned you in <span class="font-medium text-blue-500">#project-alpha</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2m ago</span>
    </div>

    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@jane_smith replied to your comment in <span class="font-medium text-blue-500">#design-feedback</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">1h ago</span>
    </div>

    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/men/78.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@peter_jones invited you to <span class="font-medium text-blue-500">#new-feature</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
    </div>
  </div>
  <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition-colors duration-200">
    View All Mentions
  </button>
</div>

관련 구성 요소

User Mentions 구성 요소

비즈니스 웹 사이트를 위해 설계된 어두운 테마를 지원하는 반응형 사용자 언급 구성 요소입니다. Tailwind CSS 및 흙색 색 구성표를 사용하는 마이크로 인터랙션이 특징입니다.

열다

User Mentions 구성 요소

뉴모피즘(Neumorphism) 스타일의 사용자는 반응형 디자인과 다크 모드를 지원하는 포트폴리오 웹사이트에 어스 톤을 사용하는 컴포넌트를 언급합니다.

열다

User Mentions 구성 요소

사용자는 Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 전자 상거래를 위한 Glassmorphism 스타일, 파스텔 색 구성표 및 복잡한 복잡성 수준이 있는 구성 요소를 언급합니다.

열다