Komponente "Datentabellen"
Eine responsive Datentabellen-Komponente, die im skeuomorphen Stil mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS entworfen wurde.
HTML-Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">User Data Table</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Avatar</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Status</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">John Doe</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">Bob Johnson</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 text-center">
<img class="mx-auto" src="https://picsum.photos/600/200" alt="Random placeholder">
</div>
</div>Verwandte Komponenten
Datentabelle zum Brutalismus
Eine einfache, brutalistische Datentabellenkomponente mit analogen Farben für Business-/Unternehmenswebsites. Es ist reaktionsschnell und unterstützt den Dunkelmodus mit Tailwind CSS.
Komponente "Datentabellen"
Eine Datentabellen-Komponente, die in einem skeuomorphen Stil gestaltet ist, reale Gegenstücke mit responsiven Effekten nachahmt und dunkle Themen unterstützt. Die Tabelle enthält Überschriften, Zeilen mit Daten und verwendet Platzhalterbilder.