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

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.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative">
      <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div>
      <div class="relative p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">User Mentions</h2>
        <div class="space-y-4">
          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Mentioned you in a comment.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Replied to your thread.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Benutzererwähnungen"

Eine einfache und minimalistische Benutzererwähnungskomponente für Blogs und den Konsum von Inhalten mit einem responsiven Design mit Unterstützung für dunkle Themen.

Offen

Komponente "Benutzererwähnungen"

Benutzererwähnungen Komponente, die den Glassmorphism-Stil mit responsivem Design und Unterstützung für den Dunkelmodus implementiert.

Offen

Komponente "Benutzererwähnungen"

Ein einfacher und minimalistischer Benutzer erwähnt die Komponente mit Unterstützung für den Dunkelmodus. Anklickbare Benutzer-Avatare und -Namen werden in einem Flexbox-Layout angezeigt. Die Komponente ist reaktionsschnell und passt sich an unterschiedliche Bildschirmgrößen an.

Offen