Composant Mentions de l’utilisateur
Un composant réactif de mentions d’utilisateurs avec prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est nécessaire, seulement du HTML avec des classes Tailwind. Pour le mode sombre, utilisez le préfixe dark : de Tailwind pour le coiffage. Les images proviennent de picsum.photos et les avatars de randomuser.me.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 py-8">
<div class="max-w-3xl mx-auto px-4">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">User Mentions</h2>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<div>
<p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex justify-end text-gray-500 dark:text-gray-400 text-sm">
<span>2 days ago</span>
</div>
</div>
<!-- Repeat similar blocks for other mentions -->
</div>
</div>Composants associés
Composant Mentions de l’utilisateur
Un composant de mention utilisateur avec conception 3D, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Mentions de l’utilisateur
Un composant réactif de mentions de l’utilisateur conçu avec un style rétro/vintage et une palette de couleurs analogue, prenant en charge le mode sombre. Il comporte des avatars d’utilisateurs, des noms et des textes de message adaptés aux interfaces de médias sociaux.
Composant Mentions de l’utilisateur
Un composant simple, propre et réactif avec une palette de couleurs vives, conçu dans un style de typographie suisse/international pour une utilisation en portfolio. Inclut la prise en charge du mode sombre.