Componente Menzioni utente
Un componente utente complesso e reattivo menziona per piattaforme educative con uno stile acquerello/artistico, una combinazione di colori neutri freddi e il supporto della modalità scura. Presenta avatar utente, nomi, ruoli e un sottile effetto di sfondo ad acquerello.
Codice HTML
<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>Componenti correlati
Componente Menzioni utente
Un utente menziona un componente progettato con uno stile Glassmorphism con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Include un supporto per il tema scuro ed è reattivo, il che lo rende adatto per i siti di e-commerce.
Componente Menzioni utente
Un componente reattivo per le menzioni utente con design Glassmorphism, combinazione di colori analoga e supporto per temi scuri.
Componente Menzioni utente
Un utente complesso menziona il componente per CRM/Business Tools, caratterizzato da una combinazione di colori sfumata viola/viola e transizioni fluide. Completamente reattivo con supporto per la modalità scura.