Componente de menciones de usuario
Un usuario complejo y receptivo menciona el componente para plataformas educativas con un estilo artístico/acuarela, un esquema de color neutro fresco y compatible con el modo oscuro. Cuenta con avatares de usuario, nombres, roles y un sutil efecto de fondo de acuarela.
Código 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>Componentes relacionados
Componente de menciones de usuario
Un componente de mención de usuario simple y minimalista, con soporte para el modo oscuro. Los avatares y nombres de usuario en los que se puede hacer clic se muestran en un diseño de caja flexible. El componente es responsive y se adapta a diferentes tamaños de pantalla.
Componente de menciones de usuario
Un componente de menciones de usuario receptivo con neumorfismo y tonos tierra para interfaces de redes sociales, con soporte para temas oscuros.
Componente de menciones de usuario
Un componente de mención de usuario receptivo diseñado para interfaces de comercio electrónico en modo oscuro, con tonos tierra y avatares de usuario de marcador de posición e imágenes de productos. Proporciona una lista de menciones sugeridas con detalles del usuario y un producto asociado, adecuado para funciones de etiquetado o colaboración.