데이터 테이블 구성 요소
Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 데이터 테이블 구성 요소로, 어두운 테마 지원 및 임의의 자리 표시자 이미지를 제공합니다.
HTML 코드
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 transition ease-in-out duration-300">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">User Data Table</h2>
<table class="min-w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<thead>
<tr class="w-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">
<th class="py-3 px-4 text-left">#</th>
<th class="py-3 px-4 text-left">Avatar</th>
<th class="py-3 px-4 text-left">Name</th>
<th class="py-3 px-4 text-left">Email</th>
<th class="py-3 px-4 text-left">Phone</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">1</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">John Doe</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(123) 456-7890</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">2</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">Jane Smith</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(321) 654-0987</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">3</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">Mike Johnson</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(456) 789-0123</td>
</tr>
</tbody>
</table>
</div>
</div>관련 구성 요소
Non-Profit/Charity를 위한 Luxury/Premium Data Table
우아하고 반응이 빠른 데이터 테이블 구성 요소는 기업의 블루 톤을 사용하여 고급스러움/프리미엄 느낌으로 설계되었으며 비영리 및 자선 단체에 적합합니다. 다크 모드 지원과 작업으로 데이터를 표시하기 위한 복잡한 인터페이스가 포함되어 있습니다.
데이터 테이블
머티리얼 디자인 스타일의 반응형 데이터 테이블 구성요소로, 자바스크립트 없이 다크 모드와 반응형 동작을 지원합니다. 데모용 자리 표시자 이미지가 포함되어 있습니다.