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

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.

Vorschau

HTML-Code 

<div class="container mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-xl-dark">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Mentions</h2>
  <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    <div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
      <img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
      </div>
    </div>

    <div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
      <img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">@janesmith</p>
      </div>
    </div>

    <div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
      <img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-gray-200 font-medium">Peter Jones</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">@peterjones</p>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

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

Komponente "Benutzererwähnungen"

Ein skeuomorpher Benutzer erwähnt eine Komponente, die entwickelt wurde, um reale Elemente nachzuahmen, mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen

Komponente "Benutzererwähnungen"

Eine komplexe, reaktionsschnelle Benutzererwähnungskomponente für Event-/Konferenz-Websites mit einem vom Bauhaus inspirierten Design mit gedämpften/entsättigten Farben und Unterstützung für den Dunkelmodus. Es ermöglicht Benutzern, Kontakte zur Erwähnung zu suchen und auszuwählen.

Offen