Composant Mentions de l’utilisateur
Un composant réactif de mentions d’utilisateur avec un design Glassmorphism, une palette de couleurs analogue et une prise en charge du thème sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6"> <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl p-6 shadow-xl backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700"> <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">User Mentions</h2> <div class="space-y-4"> <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600"> <div class="flex items-center"> <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar"> <span class="text-gray-700 dark:text-gray-200 font-semibold">@johndoe</span> </div> <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button> </div> <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600"> <div class="flex items-center"> <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar"> <span class="text-gray-700 dark:text-gray-200 font-semibold">@janedoe</span> </div> <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button> </div> <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600"> <div class="flex items-center"> <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar"> <span class="text-gray-700 dark:text-gray-200 font-semibold">@peterjones</span> </div> <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button> </div> </div> </div></div>Composants associés
Composant Mentions de l’utilisateur
Un composant réactif de mentions d’utilisateurs stylisé avec Neumorphism et Earth tones pour les interfaces de réseau social, avec prise en charge du thème sombre.
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 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.