Composant Mentions de l’utilisateur
Un utilisateur mentionne un composant pour un tableau de bord, doté d’une palette de couleurs monochromatiques, d’une mise en page simple, d’un design réactif et d’une prise en charge du thème sombre, à l’aide de Tailwind CSS.
HTML Code
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h3>
<div class="space-y-3">
<div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
<div class="flex items-center space-x-3">
<img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<p class="text-sm text-gray-700 dark:text-gray-300">@john_doe mentioned you in <span class="font-medium text-blue-500">#project-alpha</span></p>
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">2m ago</span>
</div>
<div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
<div class="flex items-center space-x-3">
<img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<p class="text-sm text-gray-700 dark:text-gray-300">@jane_smith replied to your comment in <span class="font-medium text-blue-500">#design-feedback</span></p>
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">1h ago</span>
</div>
<div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
<div class="flex items-center space-x-3">
<img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/men/78.jpg" alt="Avatar">
<p class="text-sm text-gray-700 dark:text-gray-300">@peter_jones invited you to <span class="font-medium text-blue-500">#new-feature</span></p>
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
</div>
</div>
<button class="mt-4 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition-colors duration-200">
View All Mentions
</button>
</div>Composants associés
Composant Mentions de l’utilisateur
Un composant réactif de mentions d’utilisateurs avec prise en charge du thème sombre, conçu pour les sites Web d’entreprise. Comprend des micro-interactions à l’aide de Tailwind CSS et d’une palette de couleurs terre.
Composant Mentions de l’utilisateur
Un composant simple et minimaliste que l’utilisateur mentionne, avec prise en charge du mode sombre. Les avatars et les noms des utilisateurs cliquables sont affichés dans une mise en page flexbox. Le composant est réactif et s’adapte à différentes tailles d’écran.
Composant Mentions de l’utilisateur
Un composant simple de mentions d’utilisateur conçu dans un style brutaliste avec une palette de couleurs en niveaux de gris, adapté aux sites Web d’entreprise et d’entreprise. Il inclut des mentions d’utilisateurs avec des avatars et est réactif avec la prise en charge du thème sombre.