User Mentions Component

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl p-6 shadow-xl backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700">    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">User Mentions</h2>    <div class="space-y-4">      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600">        <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="User Avatar">          <span class="text-gray-700 dark:text-gray-200 font-semibold">@johndoe</span>        </div>        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button>      </div>      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600">        <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="User Avatar">          <span class="text-gray-700 dark:text-gray-200 font-semibold">@janedoe</span>        </div>        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button>      </div>      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600">        <div class="flex items-center">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">          <span class="text-gray-700 dark:text-gray-200 font-semibold">@peterjones</span>        </div>        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button>      </div>    </div>  </div></div>