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.
HTML-Code
<div class="overflow-x-auto bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-gray-200">Retro Data Table</h2>
<table class="min-w-full border-collapse border border-gray-300 dark:border-gray-600">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">#</th>
<th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Name</th>
<th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Email</th>
<th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Avatar</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="border border-gray-300 dark:border-gray-600 p-2">1</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">John Doe</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
<td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
</tr>
<tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="border border-gray-300 dark:border-gray-600 p-2">2</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">Jane Smith</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
<td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
</tr>
<tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="border border-gray-300 dark:border-gray-600 p-2">3</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">Alice Johnson</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
<td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar"></td>
</tr>
<tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="border border-gray-300 dark:border-gray-600 p-2">4</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">Bob Brown</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
<td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
</tr>
</tbody>
</table>
</div>Verwandte Komponenten
Komponente "Datentabellen"
Eine einfache Datentabellenkomponente mit Erdtönen, Mikrointeraktionen und Unterstützung für den Dunkelmodus, die für Social-Media-Schnittstellen geeignet ist.
Retro-Datenraster
Eine responsive Datentabellenkomponente, die mit Tailwind CSS im Retro-/Vintage-Stil der 80er/90er Jahre gestaltet ist. Es verfügt über ein blockiges Design, lebendige Farbakzente (Lila/Orange im hellen Modus, Grün/Neon im dunklen Modus) und eine Monospace-Schriftart für ein nostalgisches Tech-Gefühl. Die Tabelle enthält einen eindeutigen Kopf- und Zeilenstil, umrandete Elemente wie Avatare und Statusabzeichen und unterstützt den Dunkelmodus über CSS. Zu den Platzhalterdaten gehören Benutzeravatare, Kontaktinformationen, Statusabzeichen, Rollen und Beitrittsdaten. Die Tabelle kann auf kleineren Bildschirmen horizontal gescrollt werden, um eine bessere Reaktionsfähigkeit zu gewährleisten.