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
Composant avec le style Glassmorphism, la palette de couleurs pastel et le niveau de complexité complexe pour le commerce électronique, avec un design réactif et une prise en charge du thème sombre, à l’aide de Tailwind CSS.
Composant Mentions de l’utilisateur
Un composant de mentions d’utilisateur réactif avec prise en charge du thème sombre et micro-interactions, conçu pour les sites Web d’entreprise utilisant Tailwind CSS.
Composant Mentions de l’utilisateur
Un composant conçu avec des micro-interactions, avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.