구성 요소 사용자 멘션 User Mentions 구성 요소

User Mentions 구성 요소

대시보드 인터페이스에 적합한 glassmorphism 디자인, 기업 파란색 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 User Mentions 구성 요소입니다.

미리 보기

HTML 코드

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm mx-auto p-6 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-blue-200 dark:bg-gray-800 dark:bg-opacity-30 dark:border-blue-700 transform transition-all duration-300 hover:scale-105">
    <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-6 text-center tracking-wide">
      Recent Mentions
    </h3>
    <div class="space-y-4">
      <!-- Mention Item 1 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@john_doe <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">1h ago</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Mentioned you in a report update.</p>
        </div>
      </div>

      <!-- Mention Item 2 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@jane_smith <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">3h ago</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Asked for your feedback on the new design.</p>
        </div>
      </div>

      <!-- Mention Item 3 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@alex_williams <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">Yesterday</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Shared a useful resource in the team chat.</p>
        </div>
      </div>
    </div>
    <button class="mt-8 w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg transform transition-all duration-300 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
      View All Mentions
    </button>
  </div>
</div>

관련 구성 요소

User Mentions 구성 요소

반응형 사용자는 Tailwind CSS를 지원하는 다크 모드용으로 설계된 구성 요소를 언급합니다.

열다

사용자 언급 구성 요소 - 스큐어모피즘

사용자는 스큐어모피즘 디자인, 반응형 효과 및 어두운 테마 지원이 있는 구성 요소를 언급하며 tailwind css와 함께 html만 사용합니다. 자바 스크립트가 필요하지 않습니다.

열다

User Mentions 구성 요소

Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 사용자 언급 구성 요소. JavaScript는 필요하지 않으며 Tailwind 클래스가 있는 HTML만 필요합니다. 다크 모드의 경우 스타일링을 위해 Tailwind의 dark: 접두사를 사용합니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.

열다