Komponente "Datentabellen"
Responsive Data Tables Component mit Dark Mode-Unterstützung unter Verwendung von Tailwind CSS
HTML-Code
<div class="container mx-auto p-4 dark:bg-gray-900">
<div class="data-table bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
<table class="min-w-full leading-normal">
<thead>
<tr class="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Name
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Role
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Status
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Created At
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/men/1.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
John Doe
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">Admin</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-green-200 opacity-50 rounded-full"
></span>
<span class="relative">Active</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/women/2.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Jane Smith
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Editor
</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-orange-200 opacity-50 rounded-full"
></span>
<span class="relative">Pending</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-10 h-10 rounded-full"
src="https://randomuser.me/api/portraits/men/3.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Peter Jones
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Viewer
</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-red-200 opacity-50 rounded-full"
></span>
<span class="relative">Inactive</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>Verwandte Komponenten
Datentabelle zum Brutalismus
Eine reaktionsschnelle Datentabellenkomponente im brutalistischen Design mit Unterstützung für den Dunkelmodus und Hover-Effekten.
Komponente "Datentabellen"
Eine responsive Datentabellen-Komponente, die im skeuomorphen Stil mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS entworfen wurde.
RetroVintageDataTabelle
Eine reaktionsschnelle Datentabellenkomponente im Retro/Vintage-Stil, die Tailwind CSS mit Unterstützung für den Dunkelmodus verwendet.