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

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.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg p-6">
    <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Mentions</h2>
    <div class="space-y-4">
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">John Doe</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a comment.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a post.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a message.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Benutzererwähnungen"

Benutzererwähnungen Komponente mit Glassmorphism-Stil, Pastell-Farbschema und komplexer Komplexitätsstufe für E-Commerce, mit responsivem Design und Unterstützung für dunkle Themen, unter Verwendung von Tailwind CSS.

Offen

Komponente "Benutzererwähnungen"

Ein reaktionsschneller Benutzer erwähnt eine Komponente, die für E-Commerce-Schnittstellen im Dunkelmodus entwickelt wurde und Erdtöne sowie Platzhalter-Benutzer-Avatare und Produktbilder enthält. Bietet eine Liste vorgeschlagener Erwähnungen mit Benutzerdetails und einem zugehörigen Produkt, das sich für das Tagging oder kollaborative Funktionen eignet.

Offen

Komponente "Benutzererwähnungen"

Benutzererwähnungen Komponente mit Unterstützung für den Dunkelmodus, mit reaktionsschnellen Effekten und Unterstützung für dunkle Themen. Verwendet zufällige Platzhalterbilder aus picsum.photos für Bilder und randomuser.me für Avatare.

Offen