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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 max-w-xl mx-auto mt-10">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-4">Mentions</h2>
<div class="flex flex-col gap-3">
<div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">@john_doe</p>
</div>
</div>
<div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">@jane_smith</p>
</div>
</div>
<div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-medium text-gray-800 dark:text-gray-200">Michael Johnson</p>
<p class="text-gray-600 dark:text-gray-400">@michael_j</p>
</div>
</div>
</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 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.
Composant Mentions de l’utilisateur
Un composant de mentions d’utilisateur réactif avec prise en charge du thème sombre et micro-interactions, conçu pour les sites Web d’entreprise utilisant Tailwind CSS.