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 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
Composant mettant en œuvre le style Glassmorphism avec un design réactif et la prise en charge du mode sombre.
Composant Mentions de l’utilisateur
Un composant complexe et réactif pour les sites Web d’événements/conférences, doté d’un design inspiré du Bauhaus avec des couleurs sourdes/désaturées et une prise en charge du mode sombre. Il permet aux utilisateurs de rechercher et de sélectionner des contacts à mentionner.