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’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.
Composant Mentions de l’utilisateur
Un composant simple et minimaliste pour les blogs et la consommation de contenu, doté d’un design réactif avec prise en charge du thème sombre.
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.