Компонент упоминаний пользователя

<div class="font-sans antialiased bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 min-h-screen">

  <!-- Watercolour Background Effect via pseudo-elements and gradients -->
  <style>
    .watercolor-bg {
      position: relative;
      overflow: hidden;
    }
    .watercolor-bg::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 10% 20%, rgba(200, 220, 230, 0.3) 0%, transparent 25%),
                  radial-gradient(circle at 70% 30%, rgba(200, 210, 220, 0.2) 0%, transparent 30%),
                  radial-gradient(circle at 30% 80%, rgba(230, 235, 240, 0.4) 0%, transparent 20%),
                  radial-gradient(circle at 90% 90%, rgba(210, 225, 235, 0.3) 0%, transparent 25%);
      background-blend-mode: overlay;
      opacity: 0.7;
      transform: rotate(15deg);
      z-index: -1;
      filter: blur(80px);
    }
    .dark .watercolor-bg::before {
      background: radial-gradient(circle at 10% 20%, rgba(60, 70, 80, 0.3) 0%, transparent 25%),
                  radial-gradient(circle at 70% 30%, rgba(50, 60, 70, 0.2) 0%, transparent 30%),
                  radial-gradient(circle at 30% 80%, rgba(70, 80, 90, 0.4) 0%, transparent 20%),
                  radial-gradient(circle at 90% 90%, rgba(60, 75, 85, 0.3) 0%, transparent 25%);
    }
  </style>

  <div class="max-w-4xl mx-auto rounded-3xl overflow-hidden 
              bg-gradient-to-br from-white to-stone-50 dark:from-stone-800 dark:to-stone-900
              shadow-xl dark:shadow-stone-700/30 border border-stone-200 dark:border-stone-700
              watercolor-bg relative p-6 sm:p-8 md:p-10">

    <h2 class="text-3xl sm:text-4xl font-extrabold text-stone-900 dark:text-stone-50 mb-6 sm:mb-8 text-center">
      Mentions & Collaborators
    </h2>

    <p class="text-center text-stone-600 dark:text-stone-300 mb-8 sm:mb-10 text-lg">
      Engage with fellow learners and instructors by mentioning them in your discussions.
    </p>

    <!-- Search/Filter Input -->
    <div class="mb-8 sm:mb-10 relative">
      <input type="text" placeholder="Search users or roles..." class="w-full p-3 sm:p-4 pl-12 rounded-xl 
            bg-stone-100 dark:bg-stone-700 
            border border-stone-300 dark:border-stone-600 
            text-stone-800 dark:text-stone-50 
            placeholder-stone-500 dark:placeholder-stone-400 
            focus:ring-2 focus:ring-blue-400 focus:border-transparent 
            transition duration-200 ease-in-out">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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>

    <!-- User List Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

      <!-- User Card 1 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Wonderland avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-blue-300 dark:ring-blue-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Alice Wonderland</h3>
        <p class="text-blue-600 dark:text-blue-400 text-sm font-medium mb-3">Lead Instructor</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Specializes in Advanced Algebra.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 2 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Bob The Builder avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-purple-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Bob The Builder</h3>
        <p class="text-purple-600 dark:text-purple-400 text-sm font-medium mb-3">Student Helper</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Experienced in Geometry.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 3 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/women/5.jpg" alt="Charlie Chaplin avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-green-300 dark:ring-green-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Charlie Chaplin</h3>
        <p class="text-green-600 dark:text-green-400 text-sm font-medium mb-3">Course Administrator</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Manages course registrations.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 4 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="David Copperfield avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-indigo-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">David Copperfield</h3>
        <p class="text-indigo-600 dark:text-indigo-400 text-sm font-medium mb-3">Teaching Assistant</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Aids with Calculus problems.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 5 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/women/11.jpg" alt="Eve Harrington avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-pink-300 dark:ring-pink-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Eve Harrington</h3>
        <p class="text-pink-600 dark:text-pink-400 text-sm font-medium mb-3">Instructor</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Teaches Discrete Mathematics.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 6 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/men/24.jpg" alt="Frankenstein avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-orange-300 dark:ring-orange-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Frankenstein</h3>
        <p class="text-orange-600 dark:text-orange-400 text-sm font-medium mb-3">Student</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Learning Python Programming.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

    </div>

    <!-- Pagination/Load More (Placeholder) -->
    <div class="mt-10 flex justify-center">
      <button class="px-6 py-3 rounded-full bg-blue-500 text-white text-lg font-medium 
                     hover:bg-blue-600 transition duration-300 ease-in-out 
                     focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800 
                     shadow-lg hover:shadow-xl">
        Load More Users
      </button>
    </div>

  </div>
</div>