Composant Mentions d’utilisateur - Skeuomorphisme
L’utilisateur mentionne le composant avec la conception skeuomorphism, les effets réactifs et la prise en charge du thème sombre en utilisant uniquement html avec tailwind css. Pas besoin de javascript.
HTML Code
<div class="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen flex justify-center items-center">
<div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-white dark:from-gray-900 dark:to-gray-700 opacity-50 pointer-events-none"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Mentions</h2>
<div class="space-y-4">
<!-- Mention 1 -->
<div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Mentioned you in a comment</p>
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
</div>
<!-- Mention 2 -->
<div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Added you to a project</p>
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
</div>
<!-- Mention 3 -->
<div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Reacted to your post</p>
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">1d ago</span>
</div>
</div>
</div>
</div>
</div>
Composants associés
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.
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.
Composant Mentions de l’utilisateur
Un composant réactif de mentions d’utilisateurs avec prise en charge du thème sombre, conçu pour les sites Web d’entreprise. Comprend des micro-interactions à l’aide de Tailwind CSS et d’une palette de couleurs terre.