Composant Mentions de l’utilisateur
Un composant complexe et réactif pour les plates-formes éducatives avec un style aquarelle/artistique, une palette de couleurs neutres et froides et une prise en charge du mode sombre. Comprend des avatars d’utilisateurs, des noms, des rôles et un subtil effet d’arrière-plan aquarelle.
HTML Code
<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>Composants associés
Mentions de l’utilisateur Composant 15
Composant Web qui affiche les mentions des utilisateurs dans un style Material Design, avec des effets réactifs et la prise en charge des thèmes sombres.
Composant Mentions de l’utilisateur
Un composant simple et minimaliste pour les blogs et la consommation de contenu, doté d’un design réactif avec prise en charge du thème sombre.
Composant Mentions de l’utilisateur
Un composant simple et réactif avec un style de glassmorphisme vibrant, adapté aux applications de médias sociaux. Inclut la prise en charge du mode sombre.