Data Tables

Data Tables Component

A responsive Data Table component with Neumorphism design, a triadic color scheme, and dark mode support, suitable for a blog or content site.

Open Preview

                <div class="p-8 font-sans antialiased text-gray-700 bg-gray-200 dark:bg-gray-900 dark:text-gray-200 transition-all duration-500">
  <div class="p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <h2 class="mb-6 text-2xl font-semibold text-center text-gray-800 dark:text-gray-100">Our Latest Posts</h2>
    <div class="overflow-x-auto">
      <table class="w-full text-left table-auto">
        <thead>
          <tr>
            <th class="p-4 rounded-tl-lg bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Title</th>
            <th class="p-4 bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Category</th>
            <th class="p-4 rounded-tr-lg bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Date</th>
          </tr>
        </thead>
        <tbody>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post1/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                Exploring Neumorphism in UI Design                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-blue-800 bg-blue-200 rounded-full dark:text-blue-200 dark:bg-blue-800">Design</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-15</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post2/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                The Future of Web Development                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">Technology</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-20</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post3/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                Mastering Tailwind CSS                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-red-800 bg-red-200 rounded-full dark:text-red-200 dark:bg-red-800">Front-end</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-25</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post4/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                A Journey into Minimalist Art                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">Art</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-02-01</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
  /* Neumorphism shadows for light theme */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a6a6a6, -8px -8px 16px #ffffff;
  }

  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a6a6a6, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphism shadows for dark theme */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
  }

  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #2e2e2e;
  }

</style>

<script>
  // This script is for demonstration purposes to toggle dark mode.
  // In a real application, you might use a theme switcher or OS preference.
  document.documentElement.classList.add('dark');
</script>

Data Tables Component

Responsive Data Table for Dashboard with Dark Theme Support

Open Preview

                <div class="container mx-auto p-4 dark:bg-gray-900 dark:text-gray-200">
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Dashboard Data</h2>
  <div class="overflow-x-auto">
    <table class="min-w-full bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
      <thead class="bg-gray-200 dark:bg-gray-700">
        <tr>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Name</th>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Email</th>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Role</th>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Status</th>
        </tr>
      </thead>
      <tbody class="text-gray-700 dark:text-gray-400">
        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          <td class="text-left py-3 px-4 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
            <span>John Doe</span>
          </td>
          <td class="text-left py-3 px-4">[email protected]</td>
          <td class="text-left py-3 px-4">Admin</td>
          <td class="text-left py-3 px-4"><span class="px-2 py-1 bg-green-200 text-green-800 text-xs font-semibold rounded-full dark:bg-green-700 dark:text-green-200">Active</span></td>
        </tr>
        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          <td class="text-left py-3 px-4 flex items-center">
             <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Jane Smith</span>
          </td>
          <td class="text-left py-3 px-4">[email protected]</td>
          <td class="text-left py-3 px-4">Editor</td>
          <td class="text-left py-3 px-4"><span class="px-2 py-1 bg-yellow-200 text-yellow-800 text-xs font-semibold rounded-full dark:bg-yellow-600 dark:text-yellow-100">Pending</span></td>
        </tr>
         <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          <td class="text-left py-3 px-4 flex items-center">
             <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Peter Jones</span>
          </td>
          <td class="text-left py-3 px-4">[email protected]</td>
          <td class="text-left py-3 px-4">Viewer</td>
          <td class="text-left py-3 px-4"><span class="px-2 py-1 bg-gray-200 text-gray-800 text-xs font-semibold rounded-full dark:bg-gray-600 dark:text-gray-100">Inactive</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Data Table Component

Responsive Data Table with Dark Mode

Open Preview

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

Data Tables Component

A simple data table component with earth tone colors, micro-interactions, and dark mode support, suitable for social media interfaces.

Open Preview

                <div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
    <table class="min-w-full leading-normal">
      <thead>
        <tr>
          <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
            User
          </th>
          <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
            Status
          </th>
          <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
            Joined
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img class="w-full h-full rounded-full"
                     src="https://randomuser.me/api/portraits/men/85.jpg"
                     alt="" />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 dark:text-white whitespace-no-wrap">
                  John Doe
                </p>
              </div>
            </div>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Active
            </p>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Jan 10, 2023
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img class="w-full h-full rounded-full"
                     src="https://randomuser.me/api/portraits/women/45.jpg"
                     alt="" />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 dark:text-white whitespace-no-wrap">
                  Jane Smith
                </p>
              </div>
            </div>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Pending
            </p>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Feb 15, 2023
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img class="w-full h-full rounded-full"
                     src="https://randomuser.me/api/portraits/men/60.jpg"
                     alt="" />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 dark:text-white whitespace-no-wrap">
                  Peter Jones
                </p>
              </div>
            </div>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Inactive
            </p>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Mar 20, 2023
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Data Tables Component

A responsive data table component styled in a minimalist and flat design, suitable for business/corporate websites, with dark theme support.

Open Preview

                <div class="overflow-x-auto">
    <table class="min-w-full bg-white dark:bg-gray-800">
        <thead>
            <tr class="w-full bg-gray-200 dark:bg-gray-700">
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">#</th>
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Name</th>
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Email</th>
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Avatar</th>
            </tr>
        </thead>
        <tbody>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">1</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">John Doe</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">2</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">Jane Smith</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">3</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">Alice Johnson</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">4</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">Bob Williams</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
        </tbody>
    </table>
</div>

Brutalism Data Table

A simple, brutalist data table component with analogous colors for business/corporate websites. It is responsive and supports dark mode using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
  <table class="min-w-full border-collapse border-spacing-0 shadow-xl">
    <thead>
      <tr class="bg-teal-500 dark:bg-teal-700 text-white">
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Name</th>
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Title</th>
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Status</th>
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Role</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-teal-200 dark:bg-teal-600 text-gray-900 dark:text-white">
        <td class="border border-gray-700 dark:border-gray-600 p-4">John Doe</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Software Engineer</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Active</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Member</td>
      </tr>
      <tr class="bg-teal-300 dark:bg-teal-500 text-gray-900 dark:text-white">
        <td class="border border-gray-700 dark:border-gray-600 p-4">Jane Smith</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">UI/UX Designer</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Active</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Member</td>
      </tr>
      <tr class="bg-teal-200 dark:bg-teal-600 text-gray-900 dark:text-white">
        <td class="border border-gray-700 dark:border-gray-600 p-4">Peter Jones</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Product Manager</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Inactive</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Admin</td>
      </tr>
    </tbody>
  </table>
</div>

Data Table Dark Mode

Responsive Data Table Component with Dark Mode

Open Preview

                <div class="overflow-x-auto bg-gray-900 text-pastel-light"
>
    <table class="min-w-full table-auto">
        <thead>
            <tr class="bg-gray-800">
                <th class="px-4 py-2 text-left text-pastel-lighter">Name</th>
                <th class="px-4 py-2 text-left text-pastel-lighter">Title</th>
                <th class="px-4 py-2 text-left text-pastel-lighter">Status</th>
                <th class="px-4 py-2 text-left text-pastel-lighter">Role</th>
                <th class="px-4 py-2"></th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-b border-gray-700 hover:bg-gray-700">
                <td class="px-4 py-2 flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
                    John Doe
                </td>
                <td class="px-4 py-2">Software Engineer</td>
                <td class="px-4 py-2">
                    <span class="px-2 py-1 bg-green-600 text-white rounded-full text-xs">Active</span>
                </td>
                <td class="px-4 py-2">Member</td>
                <td class="px-4 py-2 text-right">
                    <button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
                </td>
            </tr>
            <tr class="border-b border-gray-700 hover:bg-gray-700">
                <td class="px-4 py-2 flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
                    Jane Smith
                </td>
                <td class="px-4 py-2">UI/UX Designer</td>
                <td class="px-4 py-2">
                    <span class="px-2 py-1 bg-yellow-600 text-white rounded-full text-xs">Pending</span>
                </td>
                <td class="px-4 py-2">Admin</td>
                <td class="px-4 py-2 text-right">
                    <button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
                </td>
            </tr>
            <tr class="border-b border-gray-700 hover:bg-gray-700">
                <td class="px-4 py-2 flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/76.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
                    Robert Johnson
                </td>
                <td class="px-4 py-2">Project Manager</td>
                <td class="px-4 py-2">
                    <span class="px-2 py-1 bg-red-600 text-white rounded-full text-xs">Inactive</span>
                </td>
                <td class="px-4 py-2">Member</td>
                <td class="px-4 py-2 text-right">
                    <button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
                </td>
            </tr>
             <tr class="border-b border-gray-700 hover:bg-gray-700">
                <td class="px-4 py-2 flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
                    Emily Davis
                </td>
                <td class="px-4 py-2">Data Analyst</td>
                <td class="px-4 py-2">
                    <span class="px-2 py-1 bg-green-600 text-white rounded-full text-xs">Active</span>
                </td>
                <td class="px-4 py-2">Observer</td>
                <td class="px-4 py-2 text-right">
                    <button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Data Tables Component

A Data Tables Component designed with Brutalism style featuring high-saturation colors for e-commerce, responsive with dark theme support.

Open Preview

                <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
        <thead class="bg-blue-600 dark:bg-blue-900">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">#</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Product</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Price</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Availability</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Action</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">1</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md">
                        <span>Awesome Product</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$39.99</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">In Stock</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Buy Now</a>
                </td>
            </tr>
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="w-12 h-12 rounded-md">
                        <span>Amazing Gadget</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$29.99</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Limited Stock</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Buy Now</a>
                </td>
            </tr>
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">3</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="w-12 h-12 rounded-md">
                        <span>Stylish Widget</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$19.99</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Out of Stock</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Notify Me</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Social Media Data Table Monochromatic 3D Simple

A simple, monochromatic 3D design data table component for social media interfaces with dark theme support.

Open Preview

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg shadow-lg overflow-hidden">  <div class="overflow-x-auto">    <table class="min-w-full bg-gray-300 dark:bg-gray-700 rounded-lg">      <thead>        <tr class="bg-gray-400 dark:bg-gray-600 text-gray-800 dark:text-gray-200 uppercase text-sm leading-normal">          <th class="py-3 px-6 text-left">User</th>          <th class="py-3 px-6 text-left">Activity</th>          <th class="py-3 px-6 text-center">Likes</th>          <th class="py-3 px-6 text-center">Comments</th>        </tr>      </thead>      <tbody class="text-gray-800 dark:text-gray-200 text-sm font-light">        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"/>              </div>              <span>John Doe</span>            </div>          </td>          <td class="py-3 px-6 text-left">Posted a photo</td>          <td class="py-3 px-6 text-center">125</td>          <td class="py-3 px-6 text-center">36</td>        </tr>        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar"/>              </div>              <span>Jane Smith</span>            </div>          </td>          <td class="py-3 px-6 text-left">Commented on a post</td>          <td class="py-3 px-6 text-center">88</td>          <td class="py-3 px-6 text-center">12</td>        </tr>        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar"/>              </div>              <span>Peter Jones</span>            </div>          </td>          <td class="py-3 px-6 text-left">Shared a link</td>          <td class="py-3 px-6 text-center">54</td>          <td class="py-3 px-6 text-center">7</td>        </tr>        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar"/>              </div>              <span>Mary Williams</span>            </div>          </td>          <td class="py-3 px-6 text-left">Liked a photo</td>          <td class="py-3 px-6 text-center">201</td>          <td class="py-3 px-6 text-center">45</td>        </tr>      </tbody>    </table>  </div></div>

Data Tables Component

Responsive Data Tables Component with Dark Mode Support using Tailwind CSS

Open Preview

                <div class="container mx-auto p-4 dark:bg-gray-900">

  <div class="data-table bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
    <table class="min-w-full leading-normal">
      <thead>
        <tr class="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Name
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Role
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Status
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Created At
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-full rounded-full"
                  src="https://randomuser.me/api/portraits/men/1.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  John Doe
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">Admin</p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-green-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Active</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-full rounded-full"
                  src="https://randomuser.me/api/portraits/women/2.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  Jane Smith
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              Editor
            </p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-orange-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Pending</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-10 h-10 rounded-full"
                  src="https://randomuser.me/api/portraits/men/3.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  Peter Jones
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              Viewer
            </p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-red-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Inactive</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Categories