CCHub Logo CCHub Tailwind Collection
Komponenten Erwähnungen von Benutzern Komponente "Benutzererwähnungen"

Komponente "Benutzererwähnungen"

Eine komplexe, reaktionsschnelle Benutzererwähnungskomponente für Event-/Konferenz-Websites mit einem vom Bauhaus inspirierten Design mit gedämpften/entsättigten Farben und Unterstützung für den Dunkelmodus. Es ermöglicht Benutzern, Kontakte zur Erwähnung zu suchen und auszuwählen.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Komponente "Benutzererwähnungen"

Eine einfache, reaktionsschnelle Benutzererwähnungskomponente mit einem lebendigen Glasmorphismus-Stil, die für Social-Media-Anwendungen geeignet ist. Enthält Unterstützung für den Dunkelmodus.

Offen

Komponente "Benutzererwähnungen"

Eine reaktionsschnelle Komponente für Benutzererwähnungen mit Unterstützung für dunkle Themen, die für Unternehmenswebsites entwickelt wurde. Bietet Mikrointeraktionen mit Tailwind CSS und einem erdfarbenen Farbschema.

Offen

Komponente "Benutzererwähnungen"

Eine einfache Komponente für Benutzererwähnungen, die im brutalistischen Stil mit einem Graustufen-Farbschema gestaltet ist und für Geschäfts- und Unternehmenswebsites geeignet ist. Es enthält Benutzererwähnungen mit Avataren und ist reaktionsschnell mit Unterstützung für dunkle Themen.

Offen