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.
HTML-Code
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Mentioned Users</h3>
<div class="flex flex-wrap gap-4">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">John Doe</a>
</div>
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Jane Smith</a>
</div>
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Peter Jones</a>
</div>
</div>
</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.
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.
Komponente "Benutzererwähnungen"
Eine reaktionsschnelle User Mentions-Komponente mit Glassmorphism-Design, analogem Farbschema und Unterstützung für dunkle Themen.