데이터 테이블

레트로빈티지데이터테이블

다크 모드를 지원하는 Tailwind CSS를 사용하는 반응형 레트로/빈티지 스타일 데이터 테이블 구성 요소입니다.

                <!-- Retro Vintage Data Table Component -->
<div class="overflow-x-auto bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl border-4 border-teal-700 dark:border-teal-900 font-sans">
  <table class="min-w-full border-collapse border-spacing-0">
    <thead>
      <tr class="bg-teal-700 dark:bg-teal-900 text-gray-100 text-sm uppercase">
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Name</th>
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Title</th>
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Status</th>
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Role</th>
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Image</th>
      </tr>
    </thead>
    <tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-300 dark:divide-gray-600 text-gray-800 dark:text-gray-200 text-sm">
      <tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            Rickard Andersson
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Software Engineer</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Active</span>
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
            <img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1015/60/40" alt="Random Image">
        </td>
      </tr>
      <tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
             <img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
             Alice Johnson
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Product Manager</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">Pending</span>
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Admin</td>
         <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
            <img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1018/60/40" alt="Random Image">
        </td>
      </tr>
       <tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
             <img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/men/70.jpg" alt="Avatar">
             Bob Williams
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">UX Designer</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">Inactive</span>
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
         <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
            <img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1024/60/40" alt="Random Image">
        </td>
      </tr>
       <tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
             <img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar">
             Jane Smith
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Marketing Specialist</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Active</span>
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
         <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
            <img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1025/60/40" alt="Random Image">
        </td>
      </tr>
    </tbody>
  </table>
</div>

Brutalism 데이터 테이블

브루탈리즘(Brutalist) 디자인의 반응형 데이터 테이블 구성 요소로, 다크 모드 지원 및 호버 효과를 제공합니다.

미리보기 열기

                <div class="overflow-x-auto bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white">
  <table class="min-w-full table-auto">
    <thead>
      <tr>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Name</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Title</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Status</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Role</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          John Doe
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Software Engineer</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-green-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Active</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
          Jane Smith
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">UI Designer</td>
         <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-yellow-500 text-black text-xs px-2 rounded-full uppercase font-semibold">Pending</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Admin</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
          Peter Jones
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Data Analyst</td>
         <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-red-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Inactive</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

데이터 테이블 구성 요소

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">[email protected]</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">[email protected]</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">[email protected]</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>

데이터 테이블 구성 요소

스큐어모픽 스타일로 설계된 데이터 테이블 구성 요소로, 반응형 효과로 실제 항목을 모방하고 어두운 테마를 지원합니다. 테이블에는 머리글, 데이터가 있는 행이 포함되며 자리 표시자 이미지를 사용합니다.

미리보기 열기

                <div class="container mx-auto px-4 py-8">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Data Tables</h2>
    <div class="overflow-x-auto shadow-lg rounded-lg">
        <table class="min-w-full bg-white dark:bg-gray-800">
            <thead class="bg-gray-200 dark:bg-gray-700">
                <tr>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">#</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Name</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Email</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Avatar</th>
                </tr>
            </thead>
            <tbody>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">1</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">John Doe</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=1" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">2</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Jane Smith</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=2" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">3</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Alice Johnson</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">4</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Bob Brown</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=4" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<style>
    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #cbd5e0;
        }
    }
</style>

데이터 테이블 구성 요소

다크 모드를 지원하는 Tailwind CSS로 설계된 미니멀하고 반응형이 빠른 데이터 테이블 구성 요소입니다.

미리보기 열기

                <div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-md rounded-lg">
    <table class="min-w-full border-collapse">
        <thead class="bg-gray-200 dark:bg-gray-700">
            <tr>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Name</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Email</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Avatar</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Profile Picture</th>
            </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-900">
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">John Doe</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">Jane Smith</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">Alice Johnson</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
        </tbody>
    </table>
</div>

데이터 테이블 구성 요소

glassmorphism 디자인의 반응형 데이터 테이블 구성 요소로, 반투명 젖빛 유리와 같은 요소, 흐림 효과 및 다크 모드 지원을 특징으로 합니다.

미리보기 열기

                <div class="container mx-auto my-10 p-5 bg-white bg-opacity-30 backdrop-blur-lg shadow-lg rounded-lg dark:bg-gray-800 dark:bg-opacity-30">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Data Tables</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avatar</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profile Image</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-600">
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">1</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">John Doe</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/200/300" alt="Profile Image"></td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Jane Smith</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/201/300" alt="Profile Image"></td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">3</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Michael Johnson</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/202/300" alt="Profile Image"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<style>
    /* Additional styles for glassmorphism */
    body {
        background: rgb(239, 246, 255);
        background: linear-gradient(90deg, rgba(239, 246, 255, 1) 0%, rgba(255, 255, 255, 0.75) 100%);
    }
    .bg-white {
        background: rgba(255, 255, 255, 0.9) !important;
    }
    /* Dark mode adjustments */
    .dark .bg-white {
        background: rgba(31, 41, 55, 0.7) !important;
    }
</style>

데이터 테이블 구성 요소

Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 데이터 테이블 구성 요소로, 어두운 테마 지원 및 임의의 자리 표시자 이미지를 제공합니다.

미리보기 열기

                <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>

머티리얼 디자인 스타일의 반응형 데이터 테이블 구성요소로, 자바스크립트 없이 다크 모드와 반응형 동작을 지원합니다. 데모용 자리 표시자 이미지가 포함되어 있습니다.

미리보기 열기

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="shadow overflow-hidden border-b border-gray-200 dark:border-gray-800 sm:rounded-lg">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
      <thead class="bg-gray-50 dark:bg-gray-800">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
            Name
          </th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
            Title
          </th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
            Status
          </th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
            Role
          </th>
          <th scope="col" class="relative px-6 py-3">
            <span class="sr-only">Edit</span>
          </th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-10 w-10">
                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">
                  John Doe
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  [email protected]
                </div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-white">Software Engineer</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">Optimization</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100">
              Active
            </span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
            Admin
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-600">Edit</a>
          </td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-10 w-10">
                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">
                  Jane Smith
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  [email protected]
                </div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-white">UI/UX Designer</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">Creative</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100">
              Pending
            </span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
            User
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-600">Edit</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

데이터 테이블 구성 요소

레트로/빈티지 스타일을 테마로 한 반응형 데이터 테이블 구성 요소로, Tailwind CSS로 디자인되어 다크 모드를 지원하고 80/90년대의 향수를 불러일으키는 디자인 요소를 특징으로 합니다.

미리보기 열기

                <div class="overflow-x-auto bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-gray-200">Retro Data Table</h2>
    <table class="min-w-full border-collapse border border-gray-300 dark:border-gray-600">
        <thead class="bg-gray-200 dark:bg-gray-700">
            <tr>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">#</th>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Name</th>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Email</th>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Avatar</th>
            </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800">
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">1</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">John Doe</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
            </tr>
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">2</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">Jane Smith</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
            </tr>
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">3</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">Alice Johnson</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar"></td>
            </tr>
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">4</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">Bob Brown</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
            </tr>
        </tbody>
    </table>
</div>

Tailwind CSS를 사용하여 80년대/90년대 레트로/빈티지 미학으로 스타일링된 반응형 데이터 테이블 구성 요소입니다. 뭉툭한 디자인, 생생한 색상 악센트(밝은 모드의 경우 보라색/주황색, 어두운 모드의 녹색/네온), 향수를 불러일으키는 기술 느낌을 주는 고정 폭 글꼴이 특징입니다. 테이블에는 고유한 헤더 및 행 스타일, 아바타 및 상태 배지와 같은 테두리 요소가 포함되며 CSS를 통해 다크 모드를 지원합니다. 자리 표시자 데이터에는 사용자 아바타, 연락처 정보, 상태 배지, 역할 및 조인 날짜가 포함됩니다. 테이블은 더 나은 응답성을 위해 더 작은 화면에서 가로로 스크롤할 수 있습니다.

미리보기 열기

                <!-- 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 -->

카테고리

데이터 테이블

레트로빈티지데이터테이블

Brutalism 데이터 테이블

데이터 테이블 구성 요소

데이터 테이블 구성 요소

데이터 테이블 구성 요소

데이터 테이블 구성 요소

데이터 테이블 구성 요소

데이터 테이블

데이터 테이블 구성 요소

레트로 데이터 그리드