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

Komponente "Benutzererwähnungen"

Ein Benutzer erwähnt eine Komponente für ein Dashboard mit einem monochromatischen Farbschema, einfachem Layout, responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h3>
  <div class="space-y-3">
    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@john_doe mentioned you in <span class="font-medium text-blue-500">#project-alpha</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2m ago</span>
    </div>

    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@jane_smith replied to your comment in <span class="font-medium text-blue-500">#design-feedback</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">1h ago</span>
    </div>

    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/men/78.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@peter_jones invited you to <span class="font-medium text-blue-500">#new-feature</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
    </div>
  </div>
  <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition-colors duration-200">
    View All Mentions
  </button>
</div>

Verwandte Komponenten

Komponente "Benutzererwähnungen"

Ein Benutzer erwähnt eine Komponente, die Tailwind CSS mit Glassmorphism-Design, Reaktionsfähigkeit und Unterstützung für dunkle Themen verwendet.

Offen

Komponente "Benutzererwähnungen"

Eine reaktionsschnelle Komponente für Benutzererwähnungen mit Glassmorphism-Design, komplementärem Farbschema und Unterstützung für den Dunkelmodus, die für Unternehmenswebsites geeignet ist.

Offen

Benutzererwähnungen Komponente 15

Eine Webkomponente, die Benutzererwähnungen im Material Design-Stil anzeigt, mit responsiven Effekten und Unterstützung für dunkle Designs.

Offen