Ретро-сетка данных
Адаптивный компонент таблицы данных, стилизованный в стиле ретро/винтаж 80-х/90-х годов с использованием Tailwind CSS. Он отличается блочным дизайном, яркими цветовыми акцентами (фиолетовый/оранжевый в светлом режиме, зеленый/неоновый в темном режиме) и моноширинным шрифтом для ностальгического ощущения техники. Таблица включает в себя различные стили заголовков и строк, элементы с рамками, такие как аватары и значки статуса, а также поддерживает темный режим через CSS. К данным заполнителей относятся аватары пользователей, контактная информация, значки статуса, роли и даты присоединения. Таблица прокручивается горизонтально на небольших экранах для лучшей отзывчивости.
HTML-код
<!-- 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 -->Связанные компоненты
Таблица данных для социальных сетей монохроматическая 3D простая
Простой монохроматический компонент таблицы 3D-данных для интерфейсов социальных сетей с поддержкой темных тем.
Таблица данных о брутализме
Простой, брутальный компонент таблицы данных с аналогичными цветами для бизнес/корпоративных сайтов. Он адаптивный и поддерживает темный режим с использованием Tailwind CSS.