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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">User Mentions</h2>
<ul class="mt-4 space-y-4">
<li class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">John Doe</h3>
<p class="text-gray-500 dark:text-gray-400">@john_doe</p>
</div>
</li>
<li class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Jane Smith</h3>
<p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
</div>
</li>
<li class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Mike Johnson</h3>
<p class="text-gray-500 dark:text-gray-400">@mike_johnson</p>
</div>
</li>
</ul>
<div class="mt-6">
<button class="bg-blue-500 text-white rounded-lg py-2 px-4 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800">View More</button>
</div>
</div>Composants associés
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.
Composant Mentions de l’utilisateur
Un composant simple et minimaliste que l’utilisateur mentionne, avec prise en charge du mode sombre. Les avatars et les noms des utilisateurs cliquables sont affichés dans une mise en page flexbox. Le composant est réactif et s’adapte à différentes tailles d’écran.
Composant Mentions de l’utilisateur
Un composant réactif de mentions d’utilisateur avec un design Glassmorphism, une palette de couleurs complémentaire et une prise en charge du mode sombre, adapté aux sites Web d’entreprise.