Componentes de búsqueda

Categorías

Componentes Menciones de usuarios

Menciones de usuarios

Función para mencionar o etiquetar a otros usuarios

Componente de menciones de usuario

Un componente de mención de usuario complejo y receptivo para sitios web de eventos/conferencias, con un diseño inspirado en la Bauhaus con colores apagados/desaturados y soporte para modo oscuro. Permite a los usuarios buscar y seleccionar contactos para mencionarlos.

Abrir Vista previa

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 lg:p-8 min-h-screen">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-750">

    <!-- Header -->
    <div class="bg-gray-200 dark:bg-gray-800 p-4 sm:p-6 border-b border-gray-300 dark:border-gray-700 flex items-center justify-between">
      <h2 class="text-xl sm:text-2xl font-bold tracking-tight text-gray-800 dark:text-gray-100">Mention Participants</h2>
      <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 rounded-md p-1 -m-1">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>

    <!-- Search Input -->
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-750">
      <div class="relative">
        <input type="text" placeholder="Search by name or email..." class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition-colors duration-200">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
      </div>
    </div>

    <!-- Selected Mentions Area -->
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-750 bg-gray-50 dark:bg-gray-800 min-h-16 flex flex-wrap items-center gap-2">
      <span class="text-sm text-gray-600 dark:text-gray-400 italic" role="status">No participants selected yet.</span>
      <!-- Example selected user (will be dynamically added/removed) -->
      <div class="inline-flex items-center bg-blue-100 dark:bg-blue-800 rounded-full py-1 pl-3 pr-2 text-sm font-medium text-blue-800 dark:text-blue-100 group transition-all duration-200 ease-in-out transform hover:scale-105">
        <img class="w-6 h-6 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe">
        John Doe
        <button class="ml-1 p-0.5 rounded-full hover:bg-blue-200 dark:hover:bg-blue-700 text-blue-600 dark:text-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-blue-800 transition-colors duration-200" aria-label="Remove John Doe">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
      </div>
      <div class="inline-flex items-center bg-purple-100 dark:bg-purple-800 rounded-full py-1 pl-3 pr-2 text-sm font-medium text-purple-800 dark:text-purple-100 group transition-all duration-200 ease-in-out transform hover:scale-105">
        <img class="w-6 h-6 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Smith">
        Jane Smith
        <button class="ml-1 p-0.5 rounded-full hover:bg-purple-200 dark:hover:bg-purple-700 text-purple-600 dark:text-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-100 dark:focus:ring-offset-purple-800 transition-colors duration-200" aria-label="Remove Jane Smith">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
      </div>
    </div>

    <!-- Participant List -->
    <div class="max-h-96 overflow-y-auto divide-y divide-gray-200 dark:divide-gray-750">

      <!-- Participant Item -->
      <div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar of Alicia Brown">
          <div class="ml-4">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Alicia Brown</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">Frontend Developer</p>
          </div>
        </div>
        <button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
          Select
        </button>
      </div>

      <!-- Participant Item (Selected State) -->
      <div class="flex items-center justify-between p-4 sm:p-6 bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-600">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe">
          <div class="ml-4">
            <p class="font-semibold text-blue-800 dark:text-blue-100">John Doe</p>
            <p class="text-sm text-blue-600 dark:text-blue-300">[email protected]</p>
            <p class="text-xs text-blue-500 dark:text-blue-400">Project Manager</p>
          </div>
        </div>
        <button class="px-3 py-1 text-sm rounded-md border border-blue-400 dark:border-blue-600 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-blue-900" title="Deselect John Doe">
          Selected
        </button>
      </div>

      <!-- More Participants (for scroll demonstration) -->
      <div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Smith">
          <div class="ml-4">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">UI/UX Designer</p>
          </div>
        </div>
        <button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
          Select
        </button>
      </div>

      <div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar of Robert Johnson">
          <div class="ml-4">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Robert Johnson</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">Data Scientist</p>
          </div>
        </div>
        <button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
          Select
        </button>
      </div>

      <div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/35.jpg" alt="Avatar of Emily White">
          <div class="ml-4">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Emily White</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">Event Coordinator</p>
          </div>
        </div>
        <button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
          Select
        </button>
      </div>

      <div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar of Michael Green">
          <div class="ml-4">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Michael Green</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">Marketing Specialist</p>
          </div>
        </div>
        <button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
          Select
        </button>
      </div>

    </div>

    <!-- Footer Buttons -->
    <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 flex justify-end gap-3 border-t border-gray-200 dark:border-gray-750">
      <button type="button" class="px-4 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-offset-gray-800 transition-colors duration-200">
        Cancel
      </button>
      <button type="button" class="px-4 py-2 text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transition-colors duration-200">
        Add Mentions
      </button>
    </div>

  </div>

</div>

Componente de menciones de usuario

Un usuario complejo y receptivo menciona el componente para plataformas educativas con un estilo artístico/acuarela, un esquema de color neutro fresco y compatible con el modo oscuro. Cuenta con avatares de usuario, nombres, roles y un sutil efecto de fondo de acuarela.

Abrir Vista previa

                <div class="font-sans antialiased bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 min-h-screen">

  <!-- Watercolour Background Effect via pseudo-elements and gradients -->
  <style>
    .watercolor-bg {
      position: relative;
      overflow: hidden;
    }
    .watercolor-bg::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 10% 20%, rgba(200, 220, 230, 0.3) 0%, transparent 25%),
                  radial-gradient(circle at 70% 30%, rgba(200, 210, 220, 0.2) 0%, transparent 30%),
                  radial-gradient(circle at 30% 80%, rgba(230, 235, 240, 0.4) 0%, transparent 20%),
                  radial-gradient(circle at 90% 90%, rgba(210, 225, 235, 0.3) 0%, transparent 25%);
      background-blend-mode: overlay;
      opacity: 0.7;
      transform: rotate(15deg);
      z-index: -1;
      filter: blur(80px);
    }
    .dark .watercolor-bg::before {
      background: radial-gradient(circle at 10% 20%, rgba(60, 70, 80, 0.3) 0%, transparent 25%),
                  radial-gradient(circle at 70% 30%, rgba(50, 60, 70, 0.2) 0%, transparent 30%),
                  radial-gradient(circle at 30% 80%, rgba(70, 80, 90, 0.4) 0%, transparent 20%),
                  radial-gradient(circle at 90% 90%, rgba(60, 75, 85, 0.3) 0%, transparent 25%);
    }
  </style>

  <div class="max-w-4xl mx-auto rounded-3xl overflow-hidden 
              bg-gradient-to-br from-white to-stone-50 dark:from-stone-800 dark:to-stone-900
              shadow-xl dark:shadow-stone-700/30 border border-stone-200 dark:border-stone-700
              watercolor-bg relative p-6 sm:p-8 md:p-10">

    <h2 class="text-3xl sm:text-4xl font-extrabold text-stone-900 dark:text-stone-50 mb-6 sm:mb-8 text-center">
      Mentions & Collaborators
    </h2>

    <p class="text-center text-stone-600 dark:text-stone-300 mb-8 sm:mb-10 text-lg">
      Engage with fellow learners and instructors by mentioning them in your discussions.
    </p>

    <!-- Search/Filter Input -->
    <div class="mb-8 sm:mb-10 relative">
      <input type="text" placeholder="Search users or roles..." class="w-full p-3 sm:p-4 pl-12 rounded-xl 
            bg-stone-100 dark:bg-stone-700 
            border border-stone-300 dark:border-stone-600 
            text-stone-800 dark:text-stone-50 
            placeholder-stone-500 dark:placeholder-stone-400 
            focus:ring-2 focus:ring-blue-400 focus:border-transparent 
            transition duration-200 ease-in-out">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg>
    </div>

    <!-- User List Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

      <!-- User Card 1 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Wonderland avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-blue-300 dark:ring-blue-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Alice Wonderland</h3>
        <p class="text-blue-600 dark:text-blue-400 text-sm font-medium mb-3">Lead Instructor</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Specializes in Advanced Algebra.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 2 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Bob The Builder avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-purple-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Bob The Builder</h3>
        <p class="text-purple-600 dark:text-purple-400 text-sm font-medium mb-3">Student Helper</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Experienced in Geometry.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 3 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/women/5.jpg" alt="Charlie Chaplin avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-green-300 dark:ring-green-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Charlie Chaplin</h3>
        <p class="text-green-600 dark:text-green-400 text-sm font-medium mb-3">Course Administrator</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Manages course registrations.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 4 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="David Copperfield avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-indigo-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">David Copperfield</h3>
        <p class="text-indigo-600 dark:text-indigo-400 text-sm font-medium mb-3">Teaching Assistant</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Aids with Calculus problems.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 5 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/women/11.jpg" alt="Eve Harrington avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-pink-300 dark:ring-pink-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Eve Harrington</h3>
        <p class="text-pink-600 dark:text-pink-400 text-sm font-medium mb-3">Instructor</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Teaches Discrete Mathematics.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 6 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/men/24.jpg" alt="Frankenstein avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-orange-300 dark:ring-orange-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Frankenstein</h3>
        <p class="text-orange-600 dark:text-orange-400 text-sm font-medium mb-3">Student</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Learning Python Programming.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

    </div>

    <!-- Pagination/Load More (Placeholder) -->
    <div class="mt-10 flex justify-center">
      <button class="px-6 py-3 rounded-full bg-blue-500 text-white text-lg font-medium 
                     hover:bg-blue-600 transition duration-300 ease-in-out 
                     focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800 
                     shadow-lg hover:shadow-xl">
        Load More Users
      </button>
    </div>

  </div>
</div>

Componente de menciones de usuario

Un usuario complejo y minimalista menciona un componente diseñado para plataformas educativas, con un esquema de color neón/eléctrico, capacidad de respuesta y compatibilidad con el modo oscuro. Muestra menciones recientes con avatares de usuario, mensajes y marcas de tiempo, incluido un botón 'Ver todo'.

Abrir Vista previa

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden transform transition-all duration-300 hover:shadow-xl">
    <div class="p-5 sm:p-6 md:p-7 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-600 dark:text-blue-400 mb-1 leading-tight tracking-tight relative">
        Recent Mentions
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-blue-500 to-fuchsia-500 dark:from-blue-400 dark:to-fuchsia-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </h2>
      <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base">Stay updated on discussions where you've been mentioned.</p>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Mention Item 1 -->
      <div class="p-4 sm:p-5 md:p-6 hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-300 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Sarah"> 
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="text-gray-900 dark:text-gray-50 font-semibold text-base sm:text-lg">Sarah Jones
              <span class="text-blue-600 dark:text-blue-400 text-sm font-medium ml-1">@sarah_j</span>
            </p>
            <time datetime="2023-10-26T14:30:00Z" class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</time>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base leading-snug">
            <span class="font-medium text-blue-700 dark:text-blue-300">@me</span> Don't miss the new module on Quantum Physics! It's a game-changer.
          </p>
          <div class="mt-2 flex flex-wrap gap-2 text-xs">
            <span class="px-2 py-0.5 bg-fuchsia-100 dark:bg-fuchsia-900 text-fuchsia-700 dark:text-fuchsia-300 rounded-full">#Physics</span>
            <span class="px-2 py-0.5 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 rounded-full">#CourseUpdate</span>
          </div>
        </div>
      </div>

      <!-- Mention Item 2 -->
      <div class="p-4 sm:p-5 md:p-6 hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-fuchsia-400 dark:ring-fuchsia-300 object-cover" src="https://randomuser.me/api/portraits/men/82.jpg" alt="Avatar of David"> 
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="text-gray-900 dark:text-gray-50 font-semibold text-base sm:text-lg">David Lee
              <span class="text-blue-600 dark:text-blue-400 text-sm font-medium ml-1">@dave_code</span>
            </p>
            <time datetime="2023-10-26T12:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">4 hours ago</time>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base leading-snug">
            Hey <span class="font-medium text-blue-700 dark:text-blue-300">@me</span>, can you review my pull request on the new API integration? 
          </p>
          <div class="mt-2 flex flex-wrap gap-2 text-xs">
            <span class="px-2 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full">#Programming</span>
            <span class="px-2 py-0.5 bg-lime-100 dark:bg-lime-900 text-lime-700 dark:text-lime-300 rounded-full">#CodeReview</span>
          </div>
        </div>
      </div>

      <!-- Mention Item 3 -->
      <div class="p-4 sm:p-5 md:p-6 hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-lime-400 dark:ring-lime-300 object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar of Emily"> 
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="text-gray-900 dark:text-gray-50 font-semibold text-base sm:text-lg">Emily Chen
              <span class="text-blue-600 dark:text-blue-400 text-sm font-medium ml-1">@emily_c</span>
            </p>
            <time datetime="2023-10-25T09:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">1 day ago</time>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base leading-snug">
            <span class="font-medium text-blue-700 dark:text-blue-300">@me</span> The new article on ethical AI practices is now live!
          </p>
          <div class="mt-2 flex flex-wrap gap-2 text-xs">
            <span class="px-2 py-0.5 bg-sky-100 dark:bg-sky-900 text-sky-700 dark:text-sky-300 rounded-full">#ArtificialIntelligence</span>
            <span class="px-2 py-0.5 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded-full">#Ethics</span>
          </div>
        </div>
      </div>
    </div>

    <div class="p-5 sm:p-6 md:p-7 text-center">
      <button class="inline-flex items-center justify-center px-6 py-2 sm:px-8 sm:py-3 border-2 border-blue-500 dark:border-blue-400 rounded-full text-base font-semibold 
                     bg-gradient-to-r from-blue-600 to-fuchsia-600 dark:from-blue-500 dark:to-fuchsia-500 
                     text-white shadow-lg 
                     transform transition-all duration-300 ease-out
                     hover:scale-105 hover:shadow-xl hover:from-blue-700 hover:to-fuchsia-700
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:ring-opacity-75 relative group">
        <span class="relative z-10">View All Mentions</span>
        <span class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500 to-fuchsia-500 dark:from-blue-400 dark:to-fuchsia-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pulse-animation"></span>
      </button>
    </div>
  </div>
</div>

<style>
  /* This is an example of including a keyframe animation for the pulse effect in the button */
  /* In a real scenario, this would ideally be in a global CSS file or injected via a build step */
  @keyframes pulse-animation {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 0; }
  }
  .pulse-animation {
    animation: pulse-animation 1.5s infinite cubic-bezier(0.66, 0, 0.33, 1);
  }
</style>

Componente de menciones de usuario

Un usuario responsivo menciona el componente para plataformas inmobiliarias, con un estilo de diseño artístico/acuarela con tonos azul océano. Incluye elementos interactivos y soporte para el modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-slate-800 dark:to-slate-950 min-h-screen font-sans">

  <!-- Component Wrapper with artistic background -->
  <div class="max-w-4xl mx-auto rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl relative
              bg-[url('https://www.transparenttextures.com/patterns/water-color.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-wood.png')] bg-cover bg-center
              border border-blue-200 dark:border-slate-700 backdrop-blur-sm">

    <!-- Watercolor Overlay (top) -->
    <div class="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-blue-300/40 to-transparent dark:from-blue-950/40 dark:via-blue-900/10 dark:to-transparent opacity-60 pointer-events-none rounded-t-3xl"></div>

    <!-- Content Area -->
    <div class="relative p-4 sm:p-8 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm rounded-3xl">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-6 text-center tracking-tight leading-tight relative z-10">
        <span class="relative">
          Property Mentions
          <span class="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full"></span>
        </span>
      </h2>

      <!-- Search/Filter Input -->
      <div class="relative mb-8 shadow-md rounded-xl overflow-hidden">
        <input type="text" placeholder="Search mentions or properties..." class="w-full p-4 pl-12 pr-4 text-lg bg-blue-50 dark:bg-slate-800 text-blue-900 dark:text-slate-200 rounded-xl
                      focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700/50 transition-all duration-300
                      placeholder:text-blue-400 dark:placeholder:text-slate-500 border border-blue-200 dark:border-slate-700">
        <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-blue-500 dark:text-slate-400 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <!-- Mentions Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

        <!-- Mention Card 1 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Maria S.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 15, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"I just saw the listing for the beachfront villa in Malibu. It's absolutely stunning! Can we schedule a viewing soon? The photos are incredible."</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property1/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Beachfront Villa, Malibu</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$7,500,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

        <!-- Mention Card 2 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/men/30.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">David L.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 14, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Regarding the downtown condo in NYC, are there any virtual tour options available? My client is very interested but is out of state for now."</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property2/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Luxury Condo, NYC</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$2,100,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

        <!-- Mention Card 3 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Sophia K.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 12, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Your recent blog post about investing in rental properties in Florida was incredibly insightful! I'm considering the one near Orlando. Can we connect?"</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property3/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Family Home, Orlando</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$480,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

        <!-- Mention Card 4 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Michael R.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 10, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Hey, I found a promising commercial space in downtown Seattle through your platform. The details say it's perfect for a startup. Any more insights?"</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property4/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Commercial Loft, Seattle</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$1,200,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

      </div>

      <!-- See All Mentions Button -->
      <div class="mt-10 text-center">
        <button class="inline-flex items-center px-8 py-3 bg-gradient-to-r from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 text-white font-semibold rounded-full shadow-lg group
                       hover:from-blue-600 hover:to-blue-800 dark:hover:from-blue-800 dark:hover:to-blue-950 transition-all duration-300 transform hover:-translate-y-1">
          <svg class="w-5 h-5 mr-3 -ml-1 transform group-hover:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
          See All Mentions
        </button>
      </div>

    </div>

    <!-- Watercolor Overlay (bottom) -->
    <div class="absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-blue-300/40 to-transparent dark:from-blue-950/40 dark:via-transparent dark:to-transparent opacity-60 pointer-events-none rounded-b-3xl"></div>

  </div>
</div>

Componente de menciones de usuario

Un componente de mención de usuario simple, limpio y receptivo con un esquema de color vibrante, diseñado en un estilo de tipografía suiza / internacional para uso de cartera. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-purple-950 dark:to-pink-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border-t-4 border-indigo-600 dark:border-indigo-500">
    <div class="p-4 sm:p-6 pb-2 sm:pb-2 md:p-8 md:pb-4 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl md:text-3xl lg:text-3xl font-extrabold text-gray-900 dark:text-white mb-1 sm:mb-2 leading-tight tracking-tight">
        Mentions
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-medium">
        People talking about you.
      </p>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">

      <!-- Mention Item 1 -->
      <div class="p-4 sm:p-6 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between mb-0.5">
            <p class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
              John Doe
              <span class="text-xs text-indigo-600 dark:text-indigo-400 font-medium ml-1">@johndoe</span>
            </p>
            <span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-tight">
            "This project's design is <span class="font-semibold text-indigo-700 dark:text-indigo-300">outstanding</span>! Really impressed by the attention to detail."
          </p>
        </div>
      </div>

      <!-- Mention Item 2 -->
      <div class="p-4 sm:p-6 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-purple-500 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between mb-0.5">
            <p class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
              Jane Smith
              <span class="text-xs text-purple-600 dark:text-purple-400 font-medium ml-1">@janesmithy</span>
            </p>
            <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-tight">
            "Just saw the new <span class="font-semibold text-purple-700 dark:text-purple-300">case study</span>, incredibly insightful. Great work!"
          </p>
        </div>
      </div>

      <!-- Mention Item 3 -->
      <div class="p-4 sm:p-6 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-pink-500 dark:ring-pink-400" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between mb-0.5">
            <p class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
              Michael B.
              <span class="text-xs text-pink-600 dark:text-pink-400 font-medium ml-1">@mikeyb_design</span>
            </p>
            <span class="text-xs text-gray-500 dark:text-gray-400">1d ago</span>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-tight">
            "Their portfolio sets a new standard. The <span class="font-semibold text-pink-700 dark:text-pink-300">UX flow</span> is seamless and intuitive."
          </p>
        </div>
      </div>

    </div>

    <div class="p-4 sm:p-6 pt-2 sm:pt-2 md:p-8 md:pt-4 text-center">
      <a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md text-indigo-700 dark:text-indigo-200 bg-indigo-100 dark:bg-indigo-700 hover:bg-indigo-200 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
        View All Mentions
        <svg class="ml-2 -mr-0.5 w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>

  </div>
</div>

Componente de menciones de usuario

Un usuario complejo, monocromático y de estilo industrial menciona el componente para sitios web de viajes/turismo, con materias primas, elementos expuestos y estética utilitaria. Es totalmente sensible y es compatible con el modo oscuro.

Abrir Vista previa

                <div class="font-sans bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-w-4xl mx-auto my-8">
  <div class="flex items-center justify-between mb-6 pb-4 border-b border-gray-300 dark:border-gray-600">
    <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 flex items-center">
      <svg class="w-7 h-7 sm:w-8 sm:h-8 mr-3 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2H1m16-14v2a3 3 0 01-3 3H8a3 3 0 01-3-3V6m15.75 14H1.25S.5 19 .5 17V3S.5 2 2 2h20s1.5 0 1.5 1v14s0 1-1.5 1zM12 11V6m0 0l3 3m-3-3L9 9"></path>
      </svg>
      Mentions & Interactions
    </h2>
    <button class="px-4 py-2 bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded-md text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-200">
      See All
    </button>
  </div>

  <div class="mb-8 space-y-6">
    <!-- Mention Item 1 -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700 transform hover:scale-[1.01] transition-transform duration-200">
      <div class="flex-shrink-0 mr-4 mb-3 sm:mb-0">
        <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      </div>
      <div class="flex-grow">
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
          <span class="font-semibold text-gray-900 dark:text-gray-100">@john_doe</span> mentioned your recent trip to <span class="font-semibold text-gray-800 dark:text-gray-300">Tokyo, Japan</span>
        </p>
        <blockquote class="relative border-l-4 border-gray-300 dark:border-gray-600 pl-4 text-gray-700 dark:text-gray-400 text-sm italic py-1">
          "Absolutely loved your photos from Tokyo! The ramen looked incredible. Any tips on finding the best spots?"
        </blockquote>
        <div class="mt-3 flex items-center text-xs text-gray-500 dark:text-gray-400 justify-between">
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            2 hours ago
          </span>
          <div class="space-x-3">
            <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
              </svg>
              Reply
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Mention Item 2 -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700 transform hover:scale-[1.01] transition-transform duration-200">
      <div class="flex-shrink-0 mr-4 mb-3 sm:mb-0">
        <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover" src="https://randomuser.me/api/portraits/women/55.jpg" alt="User Avatar">
      </div>
      <div class="flex-grow">
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
          <span class="font-semibold text-gray-900 dark:text-gray-100">@travel_guru</span> tagged you in a post about <span class="font-semibold text-gray-800 dark:text-gray-300">hiking trails in Patagonia</span>
        </p>
        <blockquote class="relative border-l-4 border-gray-300 dark:border-gray-600 pl-4 text-gray-700 dark:text-gray-400 text-sm italic py-1">
          "For epic adventures, check out these trails! @your_profile, you'd love the views from Fitz Roy."
        </blockquote>
        <div class="mt-3 flex items-center text-xs text-gray-500 dark:text-gray-400 justify-between">
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            Yesterday
          </span>
          <div class="space-x-3">
            <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
              </svg>
              Reply
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Mention Item 3 (New reply) -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700 transform hover:scale-[1.01] transition-transform duration-200">
      <div class="flex-shrink-0 mr-4 mb-3 sm:mb-0">
        <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover" src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar">
      </div>
      <div class="flex-grow">
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
          <span class="font-semibold text-gray-900 dark:text-gray-100">@city_explorer</span> replied to your comment on <span class="font-semibold text-gray-800 dark:text-gray-300">ancient ruins in Rome</span>
        </p>
        <blockquote class="relative border-l-4 border-gray-300 dark:border-gray-600 pl-4 text-gray-700 dark:text-gray-400 text-sm italic py-1">
          "Absolutely! The Colosseum at sunset is unforgettable. Did you visit the Palatine Hill as well?"
        </blockquote>
        <div class="mt-3 flex items-center text-xs text-gray-500 dark:text-gray-400 justify-between">
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            5 days ago
          </span>
          <div class="space-x-3">
            <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
              </svg>
              Reply
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="text-center">
    <button class="px-6 py-3 bg-gray-700 text-gray-100 dark:bg-gray-600 dark:text-gray-200 rounded-md text-lg font-semibold tracking-wide hover:bg-gray-800 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-200">
      Load More Mentions
    </button>
  </div>
</div>

Componente de menciones de usuario

Un componente de mención de usuario receptivo diseñado para interfaces de comercio electrónico en modo oscuro, con tonos tierra y avatares de usuario de marcador de posición e imágenes de productos. Proporciona una lista de menciones sugeridas con detalles del usuario y un producto asociado, adecuado para funciones de etiquetado o colaboración.

Abrir Vista previa

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Mention Users and Products</h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Tag someone or an item in your comment or review.</p>
    </div>
    <div class="p-5">
      <div class="relative mb-4">
        <input type="text" placeholder="Search for users or products..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-colors duration-200">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <ul class="space-y-4 max-h-96 overflow-y-auto custom-scrollbar">
        <!-- Mention Item 1 -->
        <li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
          <img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@sarah.johansson</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Active Buyer, 12 Orders</p>
            <div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
              <img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/1025/60/60" alt="Product Image">
              <div class="flex-1 min-w-0">
                <p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Organic Cotton Tee</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">$29.99</p>
              </div>
            </div>
          </div>
        </li>
        <!-- Mention Item 2 -->
        <li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
          <img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@mark_anderson</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Community Expert, 5 Reviews</p>
            <div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
              <img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/1040/60/60" alt="Product Image">
              <div class="flex-1 min-w-0">
                <p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Handcrafted Leather Wallet</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">$59.00</p>
              </div>
            </div>
          </div>
        </li>
        <!-- Mention Item 3 (Product Only Example) -->
        <li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
          <img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 flex-shrink-0 mr-4" src="https://picsum.photos/id/1018/60/60" alt="Placeholder Product Image">
          <div class="flex-1 min-w-0">
            <p class="text-gray-900 dark:text-gray-100 font-semibold truncate">"The Adventurer" Backpack</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Outdoor Gear</p>
            <div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
              <img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/1015/60/60" alt="Related Product Image">
              <div class="flex-1 min-w-0">
                <p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Compact Foldable Chair</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">$35.50</p>
              </div>
            </div>
          </div>
        </li>
         <!-- Mention Item 4 -->
        <li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
          <img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/women/5.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@eco_living</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Sustainability Advocate</p>
            <div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
              <img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/237/60/60" alt="Product Image">
              <div class="flex-1 min-w-0">
                <p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Recycled Glass Bottle</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">$18.50</p>
              </div>
            </div>
          </div>
        </li>
        <!-- Mention Item 5 -->
        <li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
          <img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@tech_gurus</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Gadget Reviewer</p>
            <div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
              <img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/97/60/60" alt="Product Image">
              <div class="flex-1 min-w-0">
                <p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Wireless Noise-Cancelling Headphones</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">$199.99</p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="px-5 py-4 bg-gray-100 dark:bg-gray-800 flex justify-end">
      <button class="px-5 py-2 rounded-lg bg-transparent border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        Dismiss
      </button>
    </div>
  </div>
</div>

<style>
/* Custom Scrollbar for better aesthetics and cross-browser consistency */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: #374151; /* gray-700 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #4b5563; /* gray-600 */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #adadad;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #6b7280; /* gray-500 */
}
</style>

Componente de menciones de usuario

Un usuario complejo menciona el componente para CRM/Business Tools, que presenta un esquema de color degradado púrpura/violeta y transiciones suaves. Totalmente receptivo con soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 via-purple-100 to-indigo-100 dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950 min-h-screen font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-500 hover:shadow-2xl">
    <div class="p-6 sm:p-8 bg-gradient-to-r from-purple-600 to-indigo-700 dark:from-purple-800 dark:to-indigo-900 text-white flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-extrabold tracking-tight text-white dark:text-gray-100 drop-shadow-lg">Recent User Mentions</h2>
      <button class="px-4 py-2 bg-purple-700 hover:bg-purple-800 dark:bg-purple-900 dark:hover:bg-purple-800 text-white rounded-full text-sm font-semibold transition-all duration-300 transform hover:scale-105 shadow-md flex items-center group">
        <svg class="w-5 h-5 mr-1 text-white group-hover:rotate-12 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
        <span class="hidden sm:inline">New Mention</span>
      </button>
    </div>

    <div class="p-6 sm:p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in">
      <!-- Mention Card 1 -->
      <div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
          <div>
            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">Eleanor Pena</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@eleanor_p</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
          "Just wanted to give a shoutout to @crm_plus for their amazing new analytics dashboard. Super intuitive and has saved us so much time! #CRM #BusinessTools"
        </p>
        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
          <span>2 hours ago</span>
          <div class="flex space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100 transition-colors duration-300">Positive</span>
            <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
          </div>
        </div>
      </div>

      <!-- Mention Card 2 -->
      <div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
          <div>
            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">Ralph Edwards</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@ralphedwards</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
          "Experiencing some minor bugs with the new @crm_plus update, specifically with exporting contacts. Any workarounds? #CRMSupport"
        </p>
        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
          <span>6 hours ago</span>
          <div class="flex space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100 transition-colors duration-300">Neutral</span>
            <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
          </div>
        </div>
      </div>

      <!-- Mention Card 3 -->
      <div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <div>
            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">Robert Fox</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@robert_f</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
          "Highly recommend @crm_plus for small businesses! Their customer support is top-notch. They helped me integrate everything seamlessly. #CRM"
        </p>
        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
          <span>1 day ago</span>
          <div class="flex space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100 transition-colors duration-300">Positive</span>
            <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
          </div>
        </div>
      </div>

      <!-- Mention Card 4 -->
      <div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600 lg:col-span-1">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <div>
            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">Jane Cooper</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@janecooper</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
          "The new reporting features in @crm_plus are a game-changer! So much easier to visualize our sales pipeline now. Fantastic update."
        </p>
        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
          <span>2 days ago</span>
          <div class="flex space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100 transition-colors duration-300">Positive</span>
            <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
          </div>
        </div>
      </div>

      <!-- Mention Card 5 -->
      <div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600 lg:col-span-1">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
          <div>
            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">Wade Warren</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@wadewarren</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
          "Considering switching to @crm_plus from our current system. Anyone have experience with their migration tools? Looking for something pain-free."
        </p>
        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
          <span>3 days ago</span>
          <div class="flex space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100 transition-colors duration-300">Inquiry</span>
            <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
          </div>
        </div>
      </div>

       <!-- Mention Card 6 -->
      <div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600 lg:col-span-1">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">Esther Howard</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@esther.h</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
          "Loving the custom automation features in @crm_plus! It's freed up so much time for my team to focus on high-value tasks. Highly recommend."
        </p>
        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
          <span>4 days ago</span>
          <div class="flex space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100 transition-colors duration-300">Positive</span>
            <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
          </div>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 border-t border-purple-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-center">
      <button class="px-6 py-3 bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 text-white font-semibold rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700">
        Load More Mentions
      </button>
    </div>
  </div>
</div>

<style>
  /* This is a simple keyframe animation for fade-in */
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in > div {
    animation: fade-in 0.6s ease-out forwards;
    opacity: 0; /* Ensures elements are hidden before animation */
  }
  /* Stagger animation for cards */
  .animate-fade-in > div:nth-child(1) { animation-delay: 0.1s; }
  .animate-fade-in > div:nth-child(2) { animation-delay: 0.2s; }
  .animate-fade-in > div:nth-child(3) { animation-delay: 0.3s; }
  .animate-fade-in > div:nth-child(4) { animation-delay: 0.4s; }
  .animate-fade-in > div:nth-child(5) { animation-delay: 0.5s; }
  .animate-fade-in > div:nth-child(6) { animation-delay: 0.6s; }

  /* Add a smooth focus ring for accessibility */
  :focus-visible {
    outline: none;
  }

  /* Custom scrollbar for subtle overflow visualization if needed */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }
  .dark ::-webkit-scrollbar-track {
    background: #333;
  }
  ::-webkit-scrollbar-thumb {
    background: #a78bfa; /* purple-400 */
    border-radius: 10px;
  }
  .dark ::-webkit-scrollbar-thumb {
    background: #8b5cf6; /* purple-500 */
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #8B5CF6; /* purple-500 */
  }
  .dark ::-webkit-scrollbar-thumb:hover {
    background: #7c3aed; /* purple-600 */
  }
</style>

Componente de menciones de usuario

Un componente de menciones de usuario simple y receptivo con un diseño de morfismo de vidrio, esquema de color azul corporativo y soporte de modo oscuro, adecuado para interfaces de tablero.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm mx-auto p-6 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-blue-200 dark:bg-gray-800 dark:bg-opacity-30 dark:border-blue-700 transform transition-all duration-300 hover:scale-105">
    <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-6 text-center tracking-wide">
      Recent Mentions
    </h3>
    <div class="space-y-4">
      <!-- Mention Item 1 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@john_doe <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">1h ago</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Mentioned you in a report update.</p>
        </div>
      </div>

      <!-- Mention Item 2 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@jane_smith <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">3h ago</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Asked for your feedback on the new design.</p>
        </div>
      </div>

      <!-- Mention Item 3 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@alex_williams <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">Yesterday</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Shared a useful resource in the team chat.</p>
        </div>
      </div>
    </div>
    <button class="mt-8 w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg transform transition-all duration-300 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
      View All Mentions
    </button>
  </div>
</div>

Componente de menciones de usuario

Un usuario complejo inspirado en 3D menciona un componente con colores otoñales, adecuado para marcas de moda / belleza. Cuenta con avatares de usuario, nombres, roles y un recuento de menciones, con capacidad de respuesta completa y compatibilidad con el modo oscuro.

Abrir Vista previa

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