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 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.
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.
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.