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.
HTML Code
<div class="max-w-md mx-auto py-8">
<!-- Title -->
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h2>
<!-- Mentions List -->
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-5">
<div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
<div class="flex-1">
<p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-gray-500 dark:text-gray-400">@john_doe</p>
</div>
<img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
</div>
<div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
<div class="flex-1">
<p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
</div>
<img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
</div>
<div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
<img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
<div class="flex-1">
<p class="font-medium text-gray-800 dark:text-gray-200">Mike Taylor</p>
<p class="text-gray-500 dark:text-gray-400">@mike_taylor</p>
</div>
<img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
</div>
</div>
</div>Composants associés
Composant Mentions de l’utilisateur
Un composant réactif de mentions d’utilisateur avec un design Glassmorphism, une palette de couleurs complémentaire et une prise en charge du mode sombre, adapté aux sites Web d’entreprise.
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 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.