Komponente "Benutzererwähnungen"
Ein komplexer Benutzer erwähnt eine Komponente, die für Dashboards mit Unterstützung des Dunkelmodus und einem triadischen Farbschema entwickelt wurde.
HTML-Code
<div class="bg-gray-800 dark:bg-gray-900 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold mb-4">User Mentions</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-700">
<thead class="bg-gray-700">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Avatar</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Username</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Mentioned At</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-gray-800 divide-y divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">@johndoe</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">2 hours ago</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">@janedoe</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">3 hours ago</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">@alexsmith</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">5 hours ago</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>Verwandte Komponenten
Komponente "Benutzererwähnungen"
Eine einfache Komponente für Benutzererwähnungen, die im brutalistischen Stil mit einem Graustufen-Farbschema gestaltet ist und für Geschäfts- und Unternehmenswebsites geeignet ist. Es enthält Benutzererwähnungen mit Avataren und ist reaktionsschnell mit Unterstützung für dunkle Themen.
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.
Benutzererwähnungen Komponente 15
Eine Webkomponente, die Benutzererwähnungen im Material Design-Stil anzeigt, mit responsiven Effekten und Unterstützung für dunkle Designs.