Rechercher des composants

Catégories

Composants Mentions des utilisateurs

Mentions des utilisateurs

Fonctionnalité permettant de mentionner ou d’étiqueter d’autres utilisateurs

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.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Mentions</h2>
    <ul class="list-disc pl-5">
        <li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
            <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-white">@john_doe</span>
        </li>
        <li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
            <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-white">@jane_doe</span>
        </li>
        <li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
            <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-white">@mark_smith</span>
        </li>
    </ul>
    <div class="mt-4">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
    </div>
</div>

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 Aperçu

                <div class="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen flex justify-center items-center">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-white dark:from-gray-900 dark:to-gray-700 opacity-50 pointer-events-none"></div>
    
    <div class="relative z-10">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Mentions</h2>

      <div class="space-y-4">
        <!-- Mention 1 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Mentioned you in a comment</p>
          </div>
          <span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
        </div>

        <!-- Mention 2 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Added you to a project</p>
          </div>
           <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
        </div>

         <!-- Mention 3 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Reacted to your post</p>
          </div>
           <span class="text-xs text-gray-500 dark:text-gray-400">1d ago</span>
        </div>
      </div>
    </div>
  </div>
</div>

Composant Mentions de l’utilisateur

Un utilisateur mentionne un composant utilisant Tailwind CSS avec la conception Glassmorphism, la réactivité et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg p-6">
    <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Mentions</h2>
    <div class="space-y-4">
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">John Doe</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a comment.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a post.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a message.</p>
        </div>
      </div>
    </div>
  </div>
</div>

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.

Ouvrir Aperçu

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

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.

Ouvrir Aperçu

                <div class="bg-gray-900 text-white p-4 rounded-lg">
  <h2 class="text-xl font-bold mb-4">User Mentions</h2>
  <div class="space-y-4">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div>
        <p class="font-semibold">John Doe</p>
        <p class="text-gray-400 text-sm">Mentioned you in a comment</p>
      </div>
    </div>
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
      <div>
        <p class="font-semibold">Jane Smith</p>
        <p class="text-gray-400 text-sm">Mentioned you in a post</p>
      </div>
    </div>
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
      <div>
        <p class="font-semibold">Peter Jones</p>
        <p class="text-gray-400 text-sm">Mentioned you in a message</p>
      </div>
    </div>
  </div>
</div>

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 Aperçu

                <div class="flex items-center p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20 transition-all duration-300 ease-in-out">
  <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
  <div class="flex-grow">
    <p class="text-white font-semibold text-lg dark:text-white">John Doe</p>
    <p class="text-gray-200 text-sm dark:text-gray-300">@johndoe</p>
  </div>
  <button class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
    Follow
  </button>
</div>

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.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transition duration-300 ease-in-out">
    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">Mentioned Users</h3>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</span>
            </div>
        </li>
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@janesmith</span>
            </div>
        </li>
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@alicejohnson</span>
            </div>
        </li>
    </ul>
    <div class="mt-4">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md w-full h-auto">
    </div>
</div>

Composant Mentions de l’utilisateur

Un utilisateur réactif mentionne un composant conçu pour le mode sombre avec la prise en charge de Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-gray-900 text-white p-4 rounded-lg shadow-lg">
    <h2 class="text-lg font-semibold mb-2">Mentions</h2>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">John Doe</p>
            <p class="text-gray-400 text-sm">@johndoe</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Jane Smith</p>
            <p class="text-gray-400 text-sm">@janesmith</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Mike Johnson</p>
            <p class="text-gray-400 text-sm">@mikejohnson</p>
        </div>
    </div>
    <a href="#" class="text-blue-400 hover:underline">View more mentions</a>
</div>
<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
        }
    }
</style>