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 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 simple et réactif avec une conception Skeuomorphism, un schéma de couleurs analogue et la prise en charge du mode sombre.
Composant Mentions de l’utilisateur
Un utilisateur skeuomorphe mentionne un composant conçu pour imiter des éléments du monde réel, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.