Composant Mentions de l’utilisateur
Un composant conçu avec des micro-interactions, avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Mentions</h2>
<ul class="list-disc pl-5">
<li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-white">@john_doe</span>
</li>
<li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
<img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-white">@jane_doe</span>
</li>
<li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-white">@mark_smith</span>
</li>
</ul>
<div class="mt-4">
<img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
</div>
</div>Composants associés
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.
Composant Mentions de l’utilisateur
Un utilisateur complexe mentionne un composant conçu pour les tableaux de bord avec prise en charge du mode sombre et schéma de couleurs triadique.
Composant Mentions de l’utilisateur
Un utilisateur mentionne un composant pour un tableau de bord, doté d’une palette de couleurs monochromatiques, d’une mise en page simple, d’un design réactif et d’une prise en charge du thème sombre, à l’aide de Tailwind CSS.