Composant Mentions de l’utilisateur
Un utilisateur mentionne un composant utilisant Tailwind CSS avec la conception Glassmorphism, la réactivité et la prise en charge du thème sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-sm bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg p-6">
<h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Mentions</h2>
<div class="space-y-4">
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">John Doe</p>
<p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a comment.</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</p>
<p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a post.</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</p>
<p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a message.</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Mentions de l’utilisateur
Un composant réactif de mentions d’utilisateur avec des éléments de conception 3D, une palette de couleurs en niveaux de gris et une prise en charge du thème sombre pour les sites Web d’entreprise. Utilise Tailwind CSS et inclut des images/avatars de substitution.
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 réactif de mentions d’utilisateurs avec prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est nécessaire, seulement du HTML avec des classes Tailwind. Pour le mode sombre, utilisez le préfixe dark : de Tailwind pour le coiffage. Les images proviennent de picsum.photos et les avatars de randomuser.me.