User Mentions 구성 요소

<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>