User Mentions 구성 요소
반응형 사용자는 다크 모드 전자 상거래 인터페이스용으로 설계된 구성 요소를 언급하며, 흙색과 자리 표시자 사용자 아바타 및 제품 이미지를 특징으로 합니다. 사용자 세부 정보 및 태그 지정 또는 공동 작업 기능에 적합한 관련 제품과 함께 제안된 멘션 목록을 제공합니다.
HTML 코드
<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center">
<div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="px-5 py-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Mention Users and Products</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Tag someone or an item in your comment or review.</p>
</div>
<div class="p-5">
<div class="relative mb-4">
<input type="text" placeholder="Search for users or products..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-colors duration-200">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 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>
<ul class="space-y-4 max-h-96 overflow-y-auto custom-scrollbar">
<!-- Mention Item 1 -->
<li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@sarah.johansson</p>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Active Buyer, 12 Orders</p>
<div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
<img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/1025/60/60" alt="Product Image">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Organic Cotton Tee</p>
<p class="text-xs text-gray-500 dark:text-gray-400 truncate">$29.99</p>
</div>
</div>
</div>
</li>
<!-- Mention Item 2 -->
<li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@mark_anderson</p>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Community Expert, 5 Reviews</p>
<div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
<img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/1040/60/60" alt="Product Image">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Handcrafted Leather Wallet</p>
<p class="text-xs text-gray-500 dark:text-gray-400 truncate">$59.00</p>
</div>
</div>
</div>
</li>
<!-- Mention Item 3 (Product Only Example) -->
<li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 flex-shrink-0 mr-4" src="https://picsum.photos/id/1018/60/60" alt="Placeholder Product Image">
<div class="flex-1 min-w-0">
<p class="text-gray-900 dark:text-gray-100 font-semibold truncate">"The Adventurer" Backpack</p>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Outdoor Gear</p>
<div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
<img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/1015/60/60" alt="Related Product Image">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Compact Foldable Chair</p>
<p class="text-xs text-gray-500 dark:text-gray-400 truncate">$35.50</p>
</div>
</div>
</div>
</li>
<!-- Mention Item 4 -->
<li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/women/5.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@eco_living</p>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Sustainability Advocate</p>
<div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
<img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/237/60/60" alt="Product Image">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Recycled Glass Bottle</p>
<p class="text-xs text-gray-500 dark:text-gray-400 truncate">$18.50</p>
</div>
</div>
</div>
</li>
<!-- Mention Item 5 -->
<li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
<img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
<div class="flex-1 min-w-0">
<p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@tech_gurus</p>
<p class="text-sm text-gray-600 dark:text-gray-400 truncate">Gadget Reviewer</p>
<div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
<img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/97/60/60" alt="Product Image">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Wireless Noise-Cancelling Headphones</p>
<p class="text-xs text-gray-500 dark:text-gray-400 truncate">$199.99</p>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="px-5 py-4 bg-gray-100 dark:bg-gray-800 flex justify-end">
<button class="px-5 py-2 rounded-lg bg-transparent border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
Dismiss
</button>
</div>
</div>
</div>
<style>
/* Custom Scrollbar for better aesthetics and cross-browser consistency */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: #374151; /* gray-700 */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #d4d4d4;
border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background: #4b5563; /* gray-600 */
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #adadad;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #6b7280; /* gray-500 */
}
</style>