HTML 코드
<div class="container mx-auto p-4">
<div class="border rounded-lg overflow-hidden">
<table class="min-w-full bg-white dark:bg-gray-800">
<thead>
<tr>
<th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Title</th>
<th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Author</th>
<th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Date</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 1</td>
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">John Doe</td>
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-27</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 2</td>
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Jane Smith</td>
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-26</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 3</td>
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Peter Jones</td>
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-25</td>
</tr>
</tbody>
</table>
</div>
</div>관련 구성 요소
레트로 데이터 그리드
Tailwind CSS를 사용하여 80년대/90년대 레트로/빈티지 미학으로 스타일링된 반응형 데이터 테이블 구성 요소입니다. 뭉툭한 디자인, 생생한 색상 악센트(밝은 모드의 경우 보라색/주황색, 어두운 모드의 녹색/네온), 향수를 불러일으키는 기술 느낌을 주는 고정 폭 글꼴이 특징입니다. 테이블에는 고유한 헤더 및 행 스타일, 아바타 및 상태 배지와 같은 테두리 요소가 포함되며 CSS를 통해 다크 모드를 지원합니다. 자리 표시자 데이터에는 사용자 아바타, 연락처 정보, 상태 배지, 역할 및 조인 날짜가 포함됩니다. 테이블은 더 나은 응답성을 위해 더 작은 화면에서 가로로 스크롤할 수 있습니다.