Componente de menciones de usuario
Un componente de menciones de usuario receptivo con diseño de Glassmorphism, combinación de colores complementaria y compatibilidad con modo oscuro, adecuado para sitios web comerciales.
Código HTML
<div class="min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex items-center justify-center">
<div class="backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 rounded-xl p-6 w-full max-w-sm border border-white border-opacity-30 dark:border-gray-700 shadow-lg">
<h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 text-center">User Mentions</h3>
<div class="space-y-4">
<div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="font-medium text-white dark:text-gray-100">John Doe <span class="text-sm text-gray-100 dark:text-gray-300">(CEO)</span></p>
<p class="text-sm text-gray-50 dark:text-gray-400">Mentioned you in a project update.</p>
</div>
</div>
<div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="font-medium text-white dark:text-gray-100">Jane Smith <span class="text-sm text-gray-100 dark:text-gray-300">(Designer)</span></p>
<p class="text-sm text-gray-50 dark:text-gray-400">Asked your opinion on a new design.</p>
</div>
</div>
<div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/men/18.jpg" alt="User Avatar">
<div>
<p class="font-medium text-white dark:text-gray-100">Robert Brown <span class="text-sm text-gray-100 dark:text-gray-300">(Developer)</span></p>
<p class="text-sm text-gray-50 dark:text-gray-400">Assigned you a task in Jira.</p>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de menciones de usuario
Un usuario responsivo menciona el componente para plataformas inmobiliarias, con un estilo de diseño artístico/acuarela con tonos azul océano. Incluye elementos interactivos y soporte para el modo oscuro.
Componente de menciones de usuario
Un usuario complejo menciona el componente para CRM/Business Tools, que presenta un esquema de color degradado púrpura/violeta y transiciones suaves. Totalmente receptivo con soporte para modo oscuro.
Menciones de usuario Componente 15
Un componente web que muestra las menciones del usuario en un estilo de Material Design, con efectos responsivos y compatibilidad con temas oscuros.