Composants Mentions des utilisateurs Composant Mentions de l’utilisateur

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.

Aperçu

HTML Code

<div class="flex items-center space-x-4 p-4 bg-white rounded-lg shadow-xl transition-transform transform hover:scale-105 dark:bg-gray-800">
  <img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
  <div class="flex-1">
    <p class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</p>
    <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
  </div>
  <span class="inline-block bg-blue-500 text-white text-xs px-3 py-1 rounded-full shadow-md dark:bg-blue-600">
    Mentioned
  </span>
</div>

Composants associés

Composant Mentions de l’utilisateur

Un composant complexe de mentions d’utilisateur pour les outils CRM/Business, avec un schéma de couleurs dégradé violet/violet et des transitions fluides. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir

Composant Mentions d’utilisateur - Skeuomorphisme

L’utilisateur mentionne le composant avec la conception skeuomorphism, les effets réactifs et la prise en charge du thème sombre en utilisant uniquement html avec tailwind css. Pas besoin de javascript.

Ouvrir

Composant Mentions de l’utilisateur

Composant mettant en œuvre le style Glassmorphism avec un design réactif et la prise en charge du mode sombre.

Ouvrir