Composants Mentions des utilisateurs Composant Mentions de l’utilisateur

Composant Mentions de l’utilisateur

Un composant complexe, inspiré de la 3D, avec des couleurs d’automne, adapté aux marques de mode/beauté. Comprend des avatars d’utilisateurs, des noms, des rôles et un nombre de mentions, avec une réactivité totale et une prise en charge du mode sombre.

Aperçu

HTML Code

<div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans">

  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

    <!-- User Mention Card 1 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group p-6 sm:p-8 overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-orange-500 before:to-red-700 before:opacity-0 group-hover:before:opacity-20 before:rounded-3xl before:transition-opacity before:duration-300
                after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-orange-400 dark:after:ring-gray-600 after:ring-opacity-0 group-hover:after:ring-opacity-50 after:transition-all after:duration-300 z-10">

      <div class="relative z-20 flex flex-col items-center text-center">

        <div class="relative mb-4">
          <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full object-cover border-4 border-amber-400 dark:border-gray-500 shadow-md" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <span class="absolute bottom-1 right-1 block w-5 h-5 bg-green-500 border-2 border-white dark:border-gray-700 rounded-full animate-pulse"></span>
        </div>

        <h3 class="text-2xl sm:text-3xl font-extrabold text-orange-800 dark:text-orange-300 mb-1 leading-tight">Chloe Dubois</h3>
        <p class="text-md sm:text-lg text-amber-700 dark:text-amber-400 mb-4 font-semibold">Fashion Influencer</p>

        <div class="flex items-center space-x-2 text-amber-900 dark:text-amber-200 mb-5">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-lg sm:text-xl font-bold">56 Mentions</span>
        </div>

        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mb-6 line-clamp-3">"Chloe's latest collection lookbook is absolutely stunning! The autumn palette is inspiring."</p>

        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-orange-600 dark:border-orange-400 rounded-full text-base font-semibold text-orange-800 dark:text-orange-100 bg-orange-200 dark:bg-orange-700 hover:bg-orange-300 dark:hover:bg-orange-600 transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg">
          View Profile
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
        </a>
      </div>
    </div>

    <!-- User Mention Card 2 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group p-6 sm:p-8 overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-red-600 before:to-purple-800 before:opacity-0 group-hover:before:opacity-20 before:rounded-3xl before:transition-opacity before:duration-300
                after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-red-500 dark:after:ring-gray-600 after:ring-opacity-0 group-hover:after:ring-opacity-50 after:transition-all after:duration-300 z-10">

      <div class="relative z-20 flex flex-col items-center text-center">

        <div class="relative mb-4">
          <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full object-cover border-4 border-red-400 dark:border-gray-500 shadow-md" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <span class="absolute bottom-1 right-1 block w-5 h-5 bg-green-500 border-2 border-white dark:border-gray-700 rounded-full animate-pulse"></span>
        </div>

        <h3 class="text-2xl sm:text-3xl font-extrabold text-red-800 dark:text-red-300 mb-1 leading-tight">Liam Harris</h3>
        <p class="text-md sm:text-lg text-red-700 dark:text-red-400 mb-4 font-semibold">Beauty Vlogger</p>

        <div class="flex items-center space-x-2 text-red-900 dark:text-red-200 mb-5">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-lg sm:text-xl font-bold">41 Mentions</span>
        </div>

        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mb-6 line-clamp-3">"Liam's review of the new fall lipstick shades was so insightful. Must-see for beauty enthusiasts."</p>

        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-red-600 dark:border-red-400 rounded-full text-base font-semibold text-red-800 dark:text-red-100 bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-600 transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg">
          View Profile
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
        </a>
      </div>
    </div>

    <!-- User Mention Card 3 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group p-6 sm:p-8 overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-yellow-500 before:to-orange-700 before:opacity-0 group-hover:before:opacity-20 before:rounded-3xl before:transition-opacity before:duration-300
                after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-amber-500 dark:after:ring-gray-600 after:ring-opacity-0 group-hover:after:ring-opacity-50 after:transition-all after:duration-300 z-10">

      <div class="relative z-20 flex flex-col items-center text-center">

        <div class="relative mb-4">
          <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full object-cover border-4 border-amber-400 dark:border-gray-500 shadow-md" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
          <span class="absolute bottom-1 right-1 block w-5 h-5 bg-green-500 border-2 border-white dark:border-gray-700 rounded-full animate-pulse"></span>
        </div>

        <h3 class="text-2xl sm:text-3xl font-extrabold text-orange-800 dark:text-orange-300 mb-1 leading-tight">Isabella Rossi</h3>
        <p class="text-md sm:text-lg text-amber-700 dark:text-amber-400 mb-4 font-semibold">Stylist & Designer</p>

        <div class="flex items-center space-x-2 text-amber-900 dark:text-amber-200 mb-5">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-lg sm:text-xl font-bold">38 Mentions</span>
        </div>

        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mb-6 line-clamp-3">"Isabella's insights on seasonal fashion trends are always on point. A true style guru!"</p>

        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-amber-600 dark:border-amber-400 rounded-full text-base font-semibold text-amber-800 dark:text-amber-100 bg-amber-200 dark:bg-amber-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg">
          View Profile
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
        </a>
      </div>
    </div>

  </div>
</div>

Composants associés

Composant Mentions de l’utilisateur

Un utilisateur skeuomorphe mentionne un composant conçu pour imiter des éléments du monde réel, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir

Composant Mentions de l’utilisateur

Un composant réactif de mentions d’utilisateurs stylisé avec Neumorphism et Earth tones pour les interfaces de réseau social, avec prise en charge du thème sombre.

Ouvrir

Composant Mentions de l’utilisateur

Un utilisateur mentionne un composant pour un tableau de bord, doté d’une palette de couleurs monochromatiques, d’une mise en page simple, d’un design réactif et d’une prise en charge du thème sombre, à l’aide de Tailwind CSS.

Ouvrir