Composant Mentions de l’utilisateur
Un composant réactif de mentions d’utilisateur avec un design Glassmorphism, une palette de couleurs complémentaire et une prise en charge du mode sombre, adapté aux sites Web d’entreprise.
HTML Code
<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>Composants associés
Composant Mentions de l’utilisateur
Un utilisateur de style Neumorphism mentionne un composant utilisant des tons de terre pour un site Web de portfolio, avec un design réactif et une prise en charge du mode sombre.
Composant Mentions de l’utilisateur
Un utilisateur complexe mentionne un composant conçu pour les tableaux de bord avec prise en charge du mode sombre et schéma de couleurs triadique.
Composant Mentions de l’utilisateur
Un composant complexe de mentions d’utilisateur pour les outils CRM/Business, avec un schéma de couleurs dégradé violet/violet et des transitions fluides. Entièrement réactif avec prise en charge du mode sombre.