Komponente "Datentabellen"
Eine minimalistische und reaktionsschnelle Datentabellenkomponente, die mit Tailwind CSS entwickelt wurde und den Dunkelmodus unterstützt.
HTML-Code
<div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-md rounded-lg">
<table class="min-w-full border-collapse">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Avatar</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Profile Picture</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-900">
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">John Doe</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">Alice Johnson</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
</tbody>
</table>
</div>Verwandte Komponenten
Komponente "Datentabellen"
Eine responsive Datentabellenkomponente im Retro-/Vintage-Stil, die mit Tailwind CSS gestaltet ist, den Dunkelmodus unterstützt und nostalgische Designelemente aus den 80er/90er Jahren aufweist.
Komponente "Datentabellen"
Responsive Data Table für Dashboard mit Unterstützung für dunkles Design
Skeuomorphic_Earth_Tone_Data_Table
Eine einfache, reaktionsschnelle Datentabelle mit einem skeuomorphen Designstil und einem erdfarbenen Farbschema, geeignet für Geschäfts-/Unternehmenswebsites. Enthält Unterstützung für den Dunkelmodus.