搜索组件

类别

组件数据表

数据表

结构化数据的表格显示

数据表组件

一个使用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>

数据表

一个具有Material Design样式的响应式数据表组件，支持暗黑模式并在不使用JavaScript的情况下具备响应行为。包括演示用的占位符图片。

打开预览

                <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 年代/复古美学为样式。它采用块状设计、充满活力的色彩点缀（浅色模式下为紫色/橙色，深色模式下为绿色/霓虹灯）和等宽字体，营造出怀旧的科技感。该表格包括不同的标题和行样式、带边框的元素（如头像和状态徽章），并通过 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 -->

搜索组件

类别

数据表

数据表组件

数据表

数据表组件

复古数据网格