Mentions de l’utilisateur Composant 15
Composant Web qui affiche les mentions des utilisateurs dans un style Material Design, avec des effets réactifs et la prise en charge des thèmes sombres.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transition duration-300 ease-in-out">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">Mentioned Users</h3>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="flex items-center py-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
<span class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</span>
</div>
</li>
<li class="flex items-center py-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
<span class="text-gray-500 dark:text-gray-400 text-sm">@janesmith</span>
</div>
</li>
<li class="flex items-center py-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
<span class="text-gray-500 dark:text-gray-400 text-sm">@alicejohnson</span>
</div>
</li>
</ul>
<div class="mt-4">
<img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md w-full h-auto">
</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, conçu pour les sites Web d’entreprise. Comprend des micro-interactions à l’aide de Tailwind CSS et d’une palette de couleurs terre.
Composant Mentions de l’utilisateur
Un composant simple de mentions d’utilisateur conçu dans un style brutaliste avec une palette de couleurs en niveaux de gris, adapté aux sites Web d’entreprise et d’entreprise. Il inclut des mentions d’utilisateurs avec des avatars et est réactif avec la prise en charge du thème sombre.
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.