레트로 데이터 그리드
Tailwind CSS를 사용하여 80년대/90년대 레트로/빈티지 미학으로 스타일링된 반응형 데이터 테이블 구성 요소입니다. 뭉툭한 디자인, 생생한 색상 악센트(밝은 모드의 경우 보라색/주황색, 어두운 모드의 녹색/네온), 향수를 불러일으키는 기술 느낌을 주는 고정 폭 글꼴이 특징입니다. 테이블에는 고유한 헤더 및 행 스타일, 아바타 및 상태 배지와 같은 테두리 요소가 포함되며 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 -->