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