Composant Mentions de l’utilisateur
Composant avec prise en charge du mode sombre, avec des effets réactifs et la prise en charge du thème sombre. Utilise des images d’espace réservé aléatoires de picsum.photos pour les images et randomuser.me pour les avatars.
HTML Code
<div class="bg-gray-900 text-white p-4 rounded-lg">
<h2 class="text-xl font-bold mb-4">User Mentions</h2>
<div class="space-y-4">
<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="Avatar">
<div>
<p class="font-semibold">John Doe</p>
<p class="text-gray-400 text-sm">Mentioned you in a comment</p>
</div>
</div>
<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="Avatar">
<div>
<p class="font-semibold">Jane Smith</p>
<p class="text-gray-400 text-sm">Mentioned you in a post</p>
</div>
</div>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
<div>
<p class="font-semibold">Peter Jones</p>
<p class="text-gray-400 text-sm">Mentioned you in a message</p>
</div>
</div>
</div>
</div>Composants associés
Composant Mentions de l’utilisateur
Un composant réactif de mentions de l’utilisateur conçu avec un style rétro/vintage et une palette de couleurs analogue, prenant en charge le mode sombre. Il comporte des avatars d’utilisateurs, des noms et des textes de message adaptés aux interfaces de médias sociaux.
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 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.