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.
HTML-Code
<div class="container mx-auto px-4 py-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Data Tables</h2>
<div class="overflow-x-auto shadow-lg rounded-lg">
<table class="min-w-full bg-white dark:bg-gray-800">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">#</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Name</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Email</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Avatar</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">1</td>
<td class="py-2 px-4 border-b dark:border-gray-600">John Doe</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=1" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">2</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Jane Smith</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=2" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">3</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Alice Johnson</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">4</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Bob Brown</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=4" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: #cbd5e0;
}
}
</style>Verwandte Komponenten
Luxus-/Premium-Datentabelle für gemeinnützige Organisationen/Wohltätigkeitsorganisationen
Eine elegante, reaktionsschnelle Datentabellenkomponente mit einem Luxus-/Premium-Gefühl in Unternehmensblautönen, die für gemeinnützige und wohltätige Organisationen geeignet ist. Enthält Unterstützung für den Dunkelmodus und eine komplexe Benutzeroberfläche zum Anzeigen von Daten mit Aktionen.
Datentabelle
Eine responsive Datentabellenkomponente im Material Design-Stil, die Unterstützung für den Dunkelmodus und responsives Verhalten ohne JavaScript bietet. Enthält Platzhalterbilder zur Demonstration.
Komponente "Datentabellen"
Eine reaktionsfähige Datentabellenkomponente mit Neumorphism-Design, einem triadischen Farbschema und Unterstützung für den Dunkelmodus, die für einen Blog oder eine Inhaltswebsite geeignet ist.