Tailwind CSS를 사용하여 어두운 테마를 지원하는 스큐어모픽 스타일로 설계된 반응형 데이터 테이블 구성 요소입니다.
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10"> <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">User Data Table</h2> <div class="overflow-x-auto"> <table class="min-w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg"> <thead class="bg-gray-200 dark:bg-gray-700"> <tr> <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Avatar</th> <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Name</th> <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Email</th> <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Status</th> </tr> </thead> <tbody class="bg-white dark:bg-gray-800"> <tr class="hover:bg-gray-100 dark:hover:bg-gray-700"> <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"></td> <td class="py-3 px-4 text-gray-800 dark:text-gray-200">John Doe</td> <td class="py-3 px-4 text-gray-600 dark:text-gray-400">johndoe@example.com</td> <td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td> </tr> <tr class="hover:bg-gray-100 dark:hover:bg-gray-700"> <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"></td> <td class="py-3 px-4 text-gray-800 dark:text-gray-200">Jane Smith</td> <td class="py-3 px-4 text-gray-600 dark:text-gray-400">janesmith@example.com</td> <td class="py-3 px-4"><span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span></td> </tr> <tr class="hover:bg-gray-100 dark:hover:bg-gray-700"> <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td> <td class="py-3 px-4 text-gray-800 dark:text-gray-200">Bob Johnson</td> <td class="py-3 px-4 text-gray-600 dark:text-gray-400">bobjohnson@example.com</td> <td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td> </tr> </tbody> </table> </div> <div class="mt-4 text-center"> <img class="mx-auto" src="https://picsum.photos/600/200" alt="Random placeholder"> </div> </div>
Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 데이터 테이블 구성 요소로, 어두운 테마 지원 및 임의의 자리 표시자 이미지를 제공합니다.
미니멀하고 플랫 한 디자인으로 스타일링된 반응형 데이터 테이블 구성 요소로, 비즈니스/기업 웹 사이트에 적합하며 어두운 테마를 지원합니다.
다크 모드를 지원하는 Tailwind CSS를 사용하는 반응형 레트로/빈티지 스타일 데이터 테이블 구성 요소입니다.