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

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.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-black dark:text-white">User Mentions</h2>
  <ul class="mt-4 space-y-4">
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@john_doe</p>
    </li>
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@jane_smith</p>
    </li>
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@mark_twain</p>
    </li>
  </ul>
  <button class="mt-4 px-4 py-2 bg-gray-800 dark:bg-white text-white dark:text-gray-800 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none">See More Mentions</button>
</div>

Verwandte Komponenten

Komponente "Benutzererwähnungen"

Eine reaktionsschnelle Komponente für Benutzererwähnungen mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es wird kein JavaScript benötigt, nur HTML mit Tailwind-Klassen. Verwenden Sie für den Dunkelmodus das Präfix dark: von Tailwind für das Styling. Die Bilder stammen von picsum.photos und Avatare von randomuser.me.

Offen

Komponente "Benutzererwähnungen"

Eine reaktionsschnelle Komponente für Benutzererwähnungen, die mit Neumorphismus und Erdtönen für Social-Media-Netzwerkschnittstellen gestaltet ist und Unterstützung für dunkle Themen bietet.

Offen

Komponente "Benutzererwähnungen"

Eine reaktionsschnelle User Mentions-Komponente mit Glassmorphism-Design, analogem Farbschema und Unterstützung für dunkle Themen.

Offen