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 componente de mención de usuario simple y receptivo con un estilo de glassmorphism vibrante, adecuado para aplicaciones de redes sociales. Incluye soporte para modo oscuro.
Componente de menciones de usuario
Componente de menciones de usuario que implementa el estilo Glassmorphism con diseño responsivo y soporte de modo oscuro.
Componente de menciones de usuario
Un usuario con estilo Neumorphism menciona el componente que usa tonos tierra para un sitio web de portafolio, con diseño receptivo y soporte para modo oscuro.