User Mentions 구성 요소
이벤트/컨퍼런스 웹 사이트를 위한 복잡하고 반응이 빠른 사용자 멘션 구성 요소로, 차분하거나 채도가 낮은 색상과 다크 모드를 지원하는 Bauhaus에서 영감을 받은 디자인을 특징으로 합니다. 사용자가 언급할 연락처를 검색하고 선택할 수 있습니다.
HTML 코드
<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 lg:p-8 min-h-screen">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-750">
<!-- Header -->
<div class="bg-gray-200 dark:bg-gray-800 p-4 sm:p-6 border-b border-gray-300 dark:border-gray-700 flex items-center justify-between">
<h2 class="text-xl sm:text-2xl font-bold tracking-tight text-gray-800 dark:text-gray-100">Mention Participants</h2>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 rounded-md p-1 -m-1">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Search Input -->
<div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-750">
<div class="relative">
<input type="text" placeholder="Search by name or email..." class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition-colors duration-200">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
</div>
</div>
<!-- Selected Mentions Area -->
<div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-750 bg-gray-50 dark:bg-gray-800 min-h-16 flex flex-wrap items-center gap-2">
<span class="text-sm text-gray-600 dark:text-gray-400 italic" role="status">No participants selected yet.</span>
<!-- Example selected user (will be dynamically added/removed) -->
<div class="inline-flex items-center bg-blue-100 dark:bg-blue-800 rounded-full py-1 pl-3 pr-2 text-sm font-medium text-blue-800 dark:text-blue-100 group transition-all duration-200 ease-in-out transform hover:scale-105">
<img class="w-6 h-6 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe">
John Doe
<button class="ml-1 p-0.5 rounded-full hover:bg-blue-200 dark:hover:bg-blue-700 text-blue-600 dark:text-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-blue-800 transition-colors duration-200" aria-label="Remove John Doe">
<svg class="h-4 w-4" 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="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<div class="inline-flex items-center bg-purple-100 dark:bg-purple-800 rounded-full py-1 pl-3 pr-2 text-sm font-medium text-purple-800 dark:text-purple-100 group transition-all duration-200 ease-in-out transform hover:scale-105">
<img class="w-6 h-6 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Smith">
Jane Smith
<button class="ml-1 p-0.5 rounded-full hover:bg-purple-200 dark:hover:bg-purple-700 text-purple-600 dark:text-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-100 dark:focus:ring-offset-purple-800 transition-colors duration-200" aria-label="Remove Jane Smith">
<svg class="h-4 w-4" 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="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
</div>
<!-- Participant List -->
<div class="max-h-96 overflow-y-auto divide-y divide-gray-200 dark:divide-gray-750">
<!-- Participant Item -->
<div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar of Alicia Brown">
<div class="ml-4">
<p class="font-semibold text-gray-900 dark:text-gray-100">Alicia Brown</p>
<p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Frontend Developer</p>
</div>
</div>
<button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
Select
</button>
</div>
<!-- Participant Item (Selected State) -->
<div class="flex items-center justify-between p-4 sm:p-6 bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-600">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe">
<div class="ml-4">
<p class="font-semibold text-blue-800 dark:text-blue-100">John Doe</p>
<p class="text-sm text-blue-600 dark:text-blue-300">[email protected]</p>
<p class="text-xs text-blue-500 dark:text-blue-400">Project Manager</p>
</div>
</div>
<button class="px-3 py-1 text-sm rounded-md border border-blue-400 dark:border-blue-600 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-blue-900" title="Deselect John Doe">
Selected
</button>
</div>
<!-- More Participants (for scroll demonstration) -->
<div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Smith">
<div class="ml-4">
<p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
<p class="text-xs text-gray-500 dark:text-gray-500">UI/UX Designer</p>
</div>
</div>
<button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
Select
</button>
</div>
<div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar of Robert Johnson">
<div class="ml-4">
<p class="font-semibold text-gray-900 dark:text-gray-100">Robert Johnson</p>
<p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Data Scientist</p>
</div>
</div>
<button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
Select
</button>
</div>
<div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/35.jpg" alt="Avatar of Emily White">
<div class="ml-4">
<p class="font-semibold text-gray-900 dark:text-gray-100">Emily White</p>
<p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Event Coordinator</p>
</div>
</div>
<button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
Select
</button>
</div>
<div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar of Michael Green">
<div class="ml-4">
<p class="font-semibold text-gray-900 dark:text-gray-100">Michael Green</p>
<p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
<p class="text-xs text-gray-500 dark:text-gray-500">Marketing Specialist</p>
</div>
</div>
<button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
Select
</button>
</div>
</div>
<!-- Footer Buttons -->
<div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 flex justify-end gap-3 border-t border-gray-200 dark:border-gray-750">
<button type="button" class="px-4 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-offset-gray-800 transition-colors duration-200">
Cancel
</button>
<button type="button" class="px-4 py-2 text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transition-colors duration-200">
Add Mentions
</button>
</div>
</div>
</div>관련 구성 요소
User Mentions 구성 요소
사용자 언급 어두운 모드를 지원하는 구성 요소, 반응형 효과 및 어두운 테마 지원을 특징으로 합니다. 이미지에는 picsum.photos의 임의의 자리 표시자 이미지를 사용하고 아바타에는 randomuser.me 이미지를 사용합니다.
User Mentions 구성 요소
복잡한 3D에서 영감을 받은 사용자는 패션/뷰티 브랜드에 적합한 가을 색상의 구성 요소를 언급합니다. 사용자 아바타, 이름, 역할 및 멘션 수를 제공하며 완전한 응답성과 다크 모드를 지원합니다.
User Mentions 구성 요소
Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 사용자 언급 구성 요소. JavaScript는 필요하지 않으며 Tailwind 클래스가 있는 HTML만 필요합니다. 다크 모드의 경우 스타일링을 위해 Tailwind의 dark: 접두사를 사용합니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.