검색 구성 요소

카테고리

구성 요소 사용자 멘션

사용자 멘션

다른 사용자를 언급하거나 태그하는 기능

User Mentions 구성 요소

Tailwind CSS를 사용하여 구축된 반응형 효과 및 어두운 테마 지원을 특징으로 하는 마이크로 인터랙션으로 설계된 User Mentions 구성 요소입니다.

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Mentions</h2>
    <ul class="list-disc pl-5">
        <li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
            <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-white">@john_doe</span>
        </li>
        <li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
            <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-white">@jane_doe</span>
        </li>
        <li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
            <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-white">@mark_smith</span>
        </li>
    </ul>
    <div class="mt-4">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
    </div>
</div>

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

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

열다 미리 보기

                <div class="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen flex justify-center items-center">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-white dark:from-gray-900 dark:to-gray-700 opacity-50 pointer-events-none"></div>
    
    <div class="relative z-10">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Mentions</h2>

      <div class="space-y-4">
        <!-- Mention 1 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Mentioned you in a comment</p>
          </div>
          <span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
        </div>

        <!-- Mention 2 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Added you to a project</p>
          </div>
           <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
        </div>

         <!-- Mention 3 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Reacted to your post</p>
          </div>
           <span class="text-xs text-gray-500 dark:text-gray-400">1d ago</span>
        </div>
      </div>
    </div>
  </div>
</div>

User Mentions 구성 요소

Glassmorphism 디자인, 응답성 및 어두운 테마를 지원하는 Tailwind CSS를 사용하는 User Mentions 구성 요소.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg p-6">
    <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Mentions</h2>
    <div class="space-y-4">
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">John Doe</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a comment.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a post.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a message.</p>
        </div>
      </div>
    </div>
  </div>
</div>

User Mentions 구성 요소

Tailwind CSS를 사용하여 3D 디자인, 반응형 효과 및 어두운 테마를 지원하는 사용자 멘션 구성 요소입니다.

열다 미리 보기

                <div class="flex items-center space-x-4 p-4 bg-white rounded-lg shadow-xl transition-transform transform hover:scale-105 dark:bg-gray-800">
  <img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
  <div class="flex-1">
    <p class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</p>
    <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
  </div>
  <span class="inline-block bg-blue-500 text-white text-xs px-3 py-1 rounded-full shadow-md dark:bg-blue-600">
    Mentioned
  </span>
</div>

User Mentions 구성 요소

사용자 언급 어두운 모드를 지원하는 구성 요소, 반응형 효과 및 어두운 테마 지원을 특징으로 합니다. 이미지에는 picsum.photos의 임의의 자리 표시자 이미지를 사용하고 아바타에는 randomuser.me 이미지를 사용합니다.

열다 미리 보기

                <div class="bg-gray-900 text-white p-4 rounded-lg">
  <h2 class="text-xl font-bold mb-4">User Mentions</h2>
  <div class="space-y-4">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div>
        <p class="font-semibold">John Doe</p>
        <p class="text-gray-400 text-sm">Mentioned you in a comment</p>
      </div>
    </div>
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
      <div>
        <p class="font-semibold">Jane Smith</p>
        <p class="text-gray-400 text-sm">Mentioned you in a post</p>
      </div>
    </div>
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
      <div>
        <p class="font-semibold">Peter Jones</p>
        <p class="text-gray-400 text-sm">Mentioned you in a message</p>
      </div>
    </div>
  </div>
</div>

User Mentions 구성 요소

사용자 언급 : 반응 형 디자인과 어두운 모드 지원으로 Glassmorphism 스타일을 구현하는 구성 요소.

열다 미리 보기

                <div class="flex items-center p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20 transition-all duration-300 ease-in-out">
  <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
  <div class="flex-grow">
    <p class="text-white font-semibold text-lg dark:text-white">John Doe</p>
    <p class="text-gray-200 text-sm dark:text-gray-300">@johndoe</p>
  </div>
  <button class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
    Follow
  </button>
</div>

사용자 언급 구성 요소 15

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

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transition duration-300 ease-in-out">
    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">Mentioned Users</h3>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</span>
            </div>
        </li>
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@janesmith</span>
            </div>
        </li>
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@alicejohnson</span>
            </div>
        </li>
    </ul>
    <div class="mt-4">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md w-full h-auto">
    </div>
</div>

User Mentions 구성 요소

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

열다 미리 보기

                <div class="bg-gray-900 text-white p-4 rounded-lg shadow-lg">
    <h2 class="text-lg font-semibold mb-2">Mentions</h2>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">John Doe</p>
            <p class="text-gray-400 text-sm">@johndoe</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Jane Smith</p>
            <p class="text-gray-400 text-sm">@janesmith</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Mike Johnson</p>
            <p class="text-gray-400 text-sm">@mikejohnson</p>
        </div>
    </div>
    <a href="#" class="text-blue-400 hover:underline">View more mentions</a>
</div>
<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
        }
    }
</style>