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.
HTML-Code
<!-- Component Start -->
<div class="font-mono bg-orange-100 dark:bg-gray-900 p-4 sm:p-8 rounded-none border-4 border-purple-600 dark:border-green-400 shadow-xl">
<h2 class="text-3xl sm:text-4xl font-bold text-purple-700 dark:text-yellow-300 mb-6 text-center uppercase tracking-wider">
User Archives ~ System Log
</h2>
<div class="overflow-x-auto rounded-none border-2 border-purple-500 dark:border-green-500">
<table class="min-w-full w-full">
<thead class="bg-purple-500 dark:bg-green-500 text-sm uppercase">
<tr>
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
User Profile
</th>
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
Contact_Info
</th>
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
Status_Signal
</th>
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
Assigned_Role
</th>
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest text-left">
Join_Date
</th>
</tr>
</thead>
<tbody class="bg-orange-50 dark:bg-gray-800 divide-y-2 divide-purple-300 dark:divide-green-700">
<!-- Row 1 -->
<tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
<div class="flex items-center">
<div class="flex-shrink-0 h-12 w-12">
<img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar Max Power">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Max Power</div>
<div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 101</div>
</div>
</div>
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
[email protected]
<div class="text-xs text-purple-600 dark:text-green-400">Online</div>
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-green-200 text-green-800 dark:bg-green-600 dark:text-green-100 border-2 border-green-500 dark:border-green-300">
ACTIVE
</span>
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
Net Runner
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
1985-04-12
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
<div class="flex items-center">
<div class="flex-shrink-0 h-12 w-12">
<img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/women/47.jpg" alt="User Avatar Glitch Martin">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Glitch Martin</div>
<div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 202</div>
</div>
</div>
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
[email protected]
<div class="text-xs text-purple-600 dark:text-green-400">Offline</div>
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-red-200 text-red-800 dark:bg-red-600 dark:text-red-100 border-2 border-red-500 dark:border-red-300">
INACTIVE
</span>
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
Code Weaver
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
1991-11-20
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
<div class="flex items-center">
<div class="flex-shrink-0 h-12 w-12">
<img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/men/62.jpg" alt="User Avatar Rex Viper">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Rex "Viper" Fury</div>
<div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 303</div>
</div>
</div>
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
[email protected]
<div class="text-xs text-purple-600 dark:text-green-400">Online</div>
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-yellow-200 text-yellow-800 dark:bg-yellow-600 dark:text-yellow-100 border-2 border-yellow-500 dark:border-yellow-300">
PENDING_VERIFICATION
</span>
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
System Admin
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
1988-07-07
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
<div class="flex items-center">
<div class="flex-shrink-0 h-12 w-12">
<img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/women/75.jpg" alt="User Avatar Zara Byte">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Zara Byte</div>
<div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 404</div>
</div>
</div>
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
[email protected]
<div class="text-xs text-purple-600 dark:text-green-400">Idle</div>
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-gray-300 text-gray-800 dark:bg-gray-600 dark:text-gray-200 border-2 border-gray-500 dark:border-gray-400">
SUSPENDED
</span>
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
Data Analyst
</td>
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
1995-01-23
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-6 text-center text-xs text-purple-700 dark:text-green-400">
SYSTEM ONLINE | ALL RECORDS CURRENT | END OF TRANSMISSION
</div>
</div>
<!-- Component End -->Verwandte Komponenten
RetroVintageDataTabelle
Eine reaktionsschnelle Datentabellenkomponente im Retro/Vintage-Stil, die Tailwind CSS mit Unterstützung für den Dunkelmodus verwendet.
Komponente "Datentabellen"
Eine reaktionsschnelle Datentabellenkomponente mit einem Glassmorphism-Design mit durchscheinenden, mattglasähnlichen Elementen, Unschärfeeffekten und Unterstützung für den Dunkelmodus.