HTML 코드
<div class="container mx-auto p-4 dark:bg-gray-900">
<div class="data-table bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
<table class="min-w-full leading-normal">
<thead>
<tr class="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Name
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Role
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Status
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Created At
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/men/1.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
John Doe
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">Admin</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-green-200 opacity-50 rounded-full"
></span>
<span class="relative">Active</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/women/2.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Jane Smith
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Editor
</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-orange-200 opacity-50 rounded-full"
></span>
<span class="relative">Pending</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-10 h-10 rounded-full"
src="https://randomuser.me/api/portraits/men/3.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Peter Jones
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Viewer
</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-red-200 opacity-50 rounded-full"
></span>
<span class="relative">Inactive</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>관련 구성 요소
Industrial_Gaming_Data_Table
게임 웹사이트를 위해 설계된 복잡하고 반응이 빠른 데이터 테이블 구성 요소로, 노출된 요소와 가을 색 구성표가 있는 산업적 미학을 특징으로 합니다. 필터링, 정렬, 페이지 매김 및 다크 모드 지원이 포함됩니다.
Cyberpunk_Fashion_Data_Table
사이버펑크 미학, 차분한 색 구성표, 네온 액센트가 있는 반응형 데이터 테이블로, 패션 및 뷰티 제품 목록에 적합하며 다크 모드 지원 및 인터랙티브와 같은 호버 효과를 특징으로 합니다.