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 im Neumorphism-Stil erwähnt eine Komponente, die Erdtöne für eine Portfolio-Website mit responsivem Design und Unterstützung für den Dunkelmodus verwendet.

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

Benutzererwähnungen Komponente - Skeuomorphismus

Der Benutzer erwähnt eine Komponente mit Skeuomorphismus-Design, responsiven Effekten und Unterstützung für dunkle Themen, die nur HTML mit Rückenwind-CSS verwenden. Kein Javascript erforderlich.

Offen