Search Components

Data Tables

Tabular display of structured data

Paper/Print-Inspired Rainbow Gradient Data Table

A simple, responsive data table component with a paper/print-inspired design and a subtle rainbow gradient background, suitable for dashboards. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 print-effect">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100">Dashboard Data</h2>
      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Overview of recent activities.</p>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-700">
          <tr>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
              Project
            </th>
            <th scope="col" class="px-4 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-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
              Due Date
            </th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
              Members
            </th>
          </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Q3 Marketing Campaign</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
                Completed
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              2023-09-30
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
              </div>
            </td>
          </tr>
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Website Redesign V2</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">
                In Progress
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              2023-11-15
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar">
              </div>
            </td>
          </tr>
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Client Onboarding Process</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100">
                Pending
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              2023-10-01
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar">
              </div>
            </td>
          </tr>
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Annual Budget Review</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100">
                Delayed
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              2023-12-31
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Avatar">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar">
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700 text-right">
      <p class="text-sm text-gray-500 dark:text-gray-400">Last updated: Oct 26, 2023</p>
    </div>
  </div>

  <style>
    /* Basic print-like shadow/border, optional for subtle effect */
    .print-effect {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
      position: relative;
    }
    /* Optional: Add a subtle paper texture or slight curl via pseudo-elements */
    .print-effect::before,
    .print-effect::after {
      content: '';
      position: absolute;
      z-index: -1;
      transform: rotate(-0.5deg);
      box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease;
    }
    .print-effect::before {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: inherit;
    }
    .print-effect::after {
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: inherit;
      transform: rotate(0.5deg);
    }
    .print-effect:hover::before {
      transform: rotate(-1deg);
    }
    .print-effect:hover::after {
      transform: rotate(1deg);
    }
  </style>
</div>

Organic_Nature_Dashboard_Data_Table

A moderate complexity, organic/nature-inspired data table component for dashboards with a vibrant color scheme, featuring flowing lines, responsiveness, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-emerald-100 via-lime-100 to-sky-100 dark:from-slate-800 dark:via-gray-900 dark:to-teal-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden border border-emerald-200 dark:border-teal-700">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-emerald-200 dark:border-teal-700 bg-gradient-to-r from-emerald-500 to-sky-500 dark:from-emerald-700 dark:to-blue-800">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-white dark:text-white mb-2">Recent Activity Flow</h2>
      <p class="text-sm sm:text-base text-emerald-100 dark:text-teal-200">Insights from your latest natural data streams.</p>
      <div class="mt-4 flex flex-wrap gap-3 sm:gap-4">
        <button class="px-4 py-2 rounded-full text-sm font-medium bg-white text-emerald-600 shadow-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-emerald-300 dark:hover:bg-gray-600 dark:focus:ring-teal-500 dark:focus:ring-offset-gray-800">Today</button>
        <button class="px-4 py-2 rounded-full text-sm font-medium bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-500 dark:focus:ring-offset-gray-800">This Week</button>
        <button class="px-4 py-2 rounded-full text-sm font-medium bg-white text-emerald-600 shadow-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-emerald-300 dark:hover:bg-gray-600 dark:focus:ring-teal-500 dark:focus:ring-offset-gray-800">This Month</button>
      </div>
    </div>

    <div class="overflow-x-auto p-4 sm:p-6">
      <table class="min-w-full divide-y divide-emerald-200 dark:divide-teal-700">
        <thead class="bg-emerald-50 dark:bg-gray-700">
          <tr>
            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200 sm:pl-6">Source</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200">Event Type</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200">Value</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200">Status</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200">Timeline</th>
            <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
              <span class="sr-only">View</span>
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-emerald-100 dark:divide-teal-800 bg-white dark:bg-gray-800">
          <tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                <div class="flex items-center gap-3">
                    <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile picture">
                    <span>LeafyGreen Insights</span>
                </div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Harvest Update</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-lime-600 dark:text-lime-400">+ 12.5%</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm">
              <span class="inline-flex items-center rounded-full bg-green-100 dark:bg-green-700 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:text-green-200">Completed</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">2 hours ago</td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, LeafyGreen Insights</span></a>
            </td>
          </tr>
          <tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                <div class="flex items-center gap-3">
                    <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile picture">
                    <span>Oceanic Data Stream</span>
                </div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Temperature Alert</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-red-600 dark:text-red-400">- 0.8°C</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm">
              <span class="inline-flex items-center rounded-full bg-yellow-100 dark:bg-yellow-700 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:text-yellow-200">Pending</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">5 hours ago</td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, Oceanic Data Stream</span></a>
            </td>
          </tr>
          <tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                <div class="flex items-center gap-3">
                    <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Profile picture">
                    <span>MountainPeak Analytics</span>
                </div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Soil Composition</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-blue-600 dark:text-blue-400">+ 3.1% N</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm">
              <span class="inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-700 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:text-blue-200">Processing</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">1 day ago</td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, MountainPeak Analytics</span></a>
            </td>
          </tr>
          <tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                <div class="flex items-center gap-3">
                    <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Profile picture">
                    <span>ForestPath Systems</span>
                </div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Ecosystem Health</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-purple-600 dark:text-purple-400">Score 8.9</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm">
              <span class="inline-flex items-center rounded-full bg-violet-100 dark:bg-purple-700 px-2.5 py-0.5 text-xs font-medium text-violet-800 dark:text-purple-200">Validated</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">3 days ago</td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, ForestPath Systems</span></a>
            </td>
          </tr>
          <tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                <div class="flex items-center gap-3">
                    <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Profile picture">
                    <span>RiverFlow Tech</span>
                </div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Water Quality Report</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-cyan-600 dark:text-cyan-400">pH 7.1</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm">
              <span class="inline-flex items-center rounded-full bg-indigo-100 dark:bg-indigo-700 px-2.5 py-0.5 text-xs font-medium text-indigo-800 dark:text-indigo-200">Approved</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">4 days ago</td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, RiverFlow Tech</span></a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="p-4 sm:p-6 lg:p-8 border-t border-emerald-200 dark:border-teal-700 bg-emerald-50 dark:bg-gray-800">
      <nav class="flex items-center justify-between text-sm sm:text-base">
        <div class="flex-1 flex justify-between sm:hidden">
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 text-sm font-medium rounded-md text-emerald-700 dark:text-teal-200 bg-white dark:bg-gray-700 hover:bg-emerald-100 dark:hover:bg-gray-600">
            Previous
          </a>
          <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 text-sm font-medium rounded-md text-emerald-700 dark:text-teal-200 bg-white dark:bg-gray-700 hover:bg-emerald-100 dark:hover:bg-gray-600">
            Next
          </a>
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
          <div>
            <p class="text-sm text-gray-700 dark:text-gray-300">
              Showing
              <span class="font-medium">1</span>
              to
              <span class="font-medium">5</span>
              of
              <span class="font-medium">12</span>
              results
            </p>
          </div>
          <div>
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
              <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
                <span class="sr-only">Previous</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
              </a>
              <a href="#" aria-current="page" class="z-10 bg-emerald-600 border-emerald-600 text-white relative inline-flex items-center px-4 py-2 text-sm font-medium">
                1
              </a>
              <a href="#" class="relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
                2
              </a>
              <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
                3
              </a>
              <span class="relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300">
                ...
              </span>
              <a href="#" class="relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
                12
              </a>
              <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
                <span class="sr-only">Next</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
              </a>
            </nav>
          </div>
        </div>
      </nav>
    </div>

  </div>
</div>

Brutalist_ECommerce_Table

A brutalist-style, responsive data table component for e-commerce, featuring high contrast, a complementary color scheme (yellow/purple), and dark mode support. Designed for product listings or order management.

Open Preview

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-yellow-100 dark:bg-purple-900 min-h-screen text-purple-900 dark:text-yellow-100 transition-colors duration-300">

  <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold mb-6 sm:mb-8 text-black dark:text-yellow-300 uppercase tracking-widest border-b-4 border-l-4 border-black dark:border-yellow-300 p-2 transform -skew-x-6 inline-block">
    Product Listings
  </h2>

  <div class="overflow-x-auto border-4 border-black dark:border-yellow-300 bg-purple-200 dark:bg-purple-950 shadow-brutalist">
    <table class="w-full text-left border-collapse">
      <thead class="border-b-4 border-black dark:border-yellow-300 bg-purple-500 dark:bg-purple-800 text-yellow-100 dark:text-yellow-100">
        <tr>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
            ID
          </th>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
            Product
          </th>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider hidden sm:table-cell border-r-4 border-black dark:border-yellow-300">
            Category
          </th>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
            Price
          </th>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- Product 1 -->
        <tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#001</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
            <img src="https://picsum.photos/60/60?random=1" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
            <span class="font-semibold text-sm sm:text-base">Crude Widget X</span>
          </td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Electronics</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$19.99</td>
          <td class="p-3 sm:p-5 text-center">
            <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
            <button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
          </td>
        </tr>

        <!-- Product 2 -->
        <tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#002</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
            <img src="https://picsum.photos/60/60?random=2" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
            <span class="font-semibold text-sm sm:text-base">Bold Apparatus MKII</span>
          </td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Tools</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$45.00</td>
          <td class="p-3 sm:p-5 text-center">
            <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
            <button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
          </td>
        </tr>

        <!-- Product 3 -->
        <tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#003</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
            <img src="https://picsum.photos/60/60?random=3" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
            <span class="font-semibold text-sm sm:text-base">Raw Material A</span>
          </td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Material</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$7.50</td>
          <td class="p-3 sm:p-5 text-center">
            <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
            <button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
          </td>
        </tr>

        <!-- Product 4 -->
        <tr class="even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#004</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
            <img src="https://picsum.photos/60/60?random=4" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
            <span class="font-semibold text-sm sm:text-base">Unrefined Gadget Z</span>
          </td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Components</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$12.25</td>
          <td class="p-3 sm:p-5 text-center">
            <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
            <button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="mt-8 flex justify-between items-center flex-wrap gap-4">
    <p class="text-sm sm:text-base font-bold text-black dark:text-yellow-300 tracking-wide">
      Showing 1 to 4 of 12 items
    </p>
    <div class="flex space-x-2">
      <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-4 py-2 sm:px-5 sm:py-2.5 text-sm sm:text-base font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">
        Prev
      </button>
      <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-4 py-2 sm:px-5 sm:py-2.5 text-sm sm:text-base font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">
        Next
      </button>
    </div>
  </div>

</div>

<style>
  /* Brutalist Shadow for the table container */
  .shadow-brutalist {
    box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1);
  }

  .dark .shadow-brutalist {
    box-shadow: 10px 10px 0px 0px var(--tw-color-yellow-300);
  }
</style>

Data Tables Component

Glassmorphism Data Tables Component with vibrant colors for portfolio, responsive with dark mode support. No JavaScript needed, only HTML with Tailwind CSS.

Open Preview

                <div class="H-screen w-full bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 p-8 dark:from-gray-900 dark:via-gray-800 dark:to-black">
  <div class="mx-auto max-w-4xl rounded-lg bg-white bg-opacity-10 p-8 shadow-lg backdrop-blur-lg dark:bg-gray-700 dark:bg-opacity-20">
    <h2 class="mb-6 text-center text-4xl font-bold text-white drop-shadow-lg dark:text-gray-200">My Projects</h2>
    <div class="overflow-x-auto">
      <table class="min-w-full rounded-lg bg-white bg-opacity-5 text-left text-sm text-white shadow-md backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-5">
        <thead>
          <tr class="bg-gray-700 bg-opacity-20 text-gray-200 dark:bg-gray-900 dark:bg-opacity-30">
            <th class="px-6 py-3">Project Name</th>
            <th class="px-6 py-3">Category</th>
            <th class="px-6 py-3">Status</th>
            <th class="px-6 py-3">Preview</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Vibrant Dash</td>
            <td class="px-6 py-4">Dashboard UI</td>
            <td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/vibrantdash/100/60" alt="Vibrant Dash Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">AquaFlow Landing</td>
            <td class="px-6 py-4">Website</td>
            <td class="px-6 py-4"><span class="rounded-full bg-yellow-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">In Progress</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/aquaflow/100/60" alt="AquaFlow Landing Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Neon Chatbot</td>
            <td class="px-6 py-4">Application</td>
            <td class="px-6 py-4"><span class="rounded-full bg-blue-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Planned</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/neonchatbot/100/60" alt="Neon Chatbot Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="hover:bg-gray-600 hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Retro Portfolio</td>
            <td class="px-6 py-4">Portfolio</td>
            <td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/retroportfolio/100/60" alt="Retro Portfolio Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

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>

Search Components

Categories

Data Tables