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

User Mentions 구성 요소

3D 디자인 요소, 회색조 색 구성표 및 비즈니스/기업 웹 사이트에 대한 어두운 테마 지원을 제공하는 반응형 User Mentions 구성 요소입니다. Tailwind CSS를 사용하고 자리 표시자 이미지/아바타를 포함합니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative">
      <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div>
      <div class="relative p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">User Mentions</h2>
        <div class="space-y-4">
          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Mentioned you in a comment.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Replied to your thread.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

사용자 언급 구성 요소 15

머티리얼 디자인 스타일로 사용자 멘션을 표시하는 웹 구성 요소로, 반응형 효과와 어두운 테마 지원을 제공합니다.

열다

User Mentions 구성 요소

단순하고 미니멀한 사용자는 블로그 및 콘텐츠 소비를 위한 구성 요소를 언급하며, 어두운 테마를 지원하는 반응형 디자인을 특징으로 합니다.

열다

User Mentions 구성 요소

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

열다