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 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.
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.
Komponente "Benutzererwähnungen"
Eine komplexe Benutzererwähnungskomponente für CRM/Business Tools mit einem violetten/violetten Farbschema und fließenden Übergängen. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.