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

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.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-3xl mx-auto px-4">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">User Mentions</h2>
    
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
        <div>
          <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</p>
        </div>
      </div>
      
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      
      <div class="flex justify-end text-gray-500 dark:text-gray-400 text-sm">
        <span>2 days ago</span>
      </div>
    </div>
    
    <!-- Repeat similar blocks for other mentions -->
    
  </div>
</div>

Verwandte Komponenten

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

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 3D-Designelementen, Graustufen-Farbschema und Unterstützung für dunkle Themen für Geschäfts-/Unternehmenswebsites. Verwendet Tailwind CSS und enthält Platzhalterbilder/Avatare.

Offen