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 composant réactif de mentions de l’utilisateur conçu avec un style rétro/vintage et une palette de couleurs analogue, prenant en charge le mode sombre. Il comporte des avatars d’utilisateurs, des noms et des textes de message adaptés aux interfaces de médias sociaux.
Composant Mentions de l’utilisateur
Un composant simple et réactif avec un design glassmorphism, une palette de couleurs bleues d’entreprise et une prise en charge du mode sombre, adapté aux interfaces de tableau de bord.
Composant Mentions de l’utilisateur
Un utilisateur rétro-vintage mentionne un composant pour le commerce électronique avec des couleurs triadiques, une complexité modérée, une réactivité et une prise en charge du mode sombre. Pas de JavaScript.