<table class="min-w-full text-sm">
  <thead class="text-black dark:bg-gray-600 dark:text-white">
    <tr class="border-b">
      <th class="px-4 py-3 text-left uppercase">id</th>
      <th class="px-4 py-3 text-left capitalize">name</th>
      <th class="px-4 py-3 text-left capitalize">status</th>
      <th class="px-4 py-3 text-left capitalize">invoice</th>
      <th class="px-4 py-3 text-left capitalize">date</th>
      <th class="px-4 py-3 text-left capitalize">action</th>
    </tr>
  </thead>

  <tbody class="text-left divide-y divide-gray-200 dark:bg-gray-500 dark:text-white">
    <tr>
      <td class="px-4 py-3">278805101</td>
      <td class="px-4 py-3">Christopher Neal</td>
      <td class="px-4 py-3">Subscribed</td>
      <td class="px-4 py-3">$35.00</td>
      <td class="px-4 py-3">October 15, 2022</td>
      <th class="px-4 py-3">
        <a href="#" class="px-3 py-2 text-sm font-medium text-gray-500 bg-gray-100 rounded-md hover:underline">Details</a>
      </th>
    </tr>
    <tr>
      <td class="px-4 py-3">354581101</td>
      <td class="px-4 py-3">Aaron James</td>
      <td class="px-4 py-3">Unsubscribed</td>
      <td class="px-4 py-3">$19.50</td>
      <td class="px-4 py-3">October 5, 2022</td>
      <th class="px-4 py-3">
        <a href="#" class="px-3 py-2 text-sm font-medium text-gray-500 bg-gray-100 rounded-md hover:underline">Details</a>
      </th>
    </tr>
  </tbody>
</table>

<!-- Tables Border Colors -->
<table class="border border-indigo-400">
  <thead class="border border-indigo-400">
    <tr class="text-left divide-x divide-indigo-400 dark:text-gray-200">
      <th class="px-5 py-2">Id</th>
      <th class="px-5 py-2">Title</th>
      <th class="px-5 py-2">Status</th>
      <th class="px-5 py-2">Assignee</th>
      <th class="px-5 py-2">Price</th>
      <th></th>
    </tr>
  </thead>
  <tbody class="divide-y divide-indigo-400">
    <tr class="divide-x divide-indigo-400 text-slate-500 dark:text-gray-200">
      <th class="px-5 py-2">1</th>
      <td class="px-5 py-2">Implement new UX</td>
      <td class="px-5 py-2"><span class="px-2 py-1 text-xs font-semibold text-gray-500 bg-gray-200">Backlog</span></td>
      <td class="px-5 py-2">Lanora Sandoval</td>
      <td class="px-5 py-2">$4,521</td>
      <td class="px-5 py-2">
        <a href="#">
          <svg class="h-4 fill-slate-500 dark:fill-gray-200" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22 16.75c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75z" fill-rule="nonzero" /></svg>
        </a>
      </td>
    </tr>
    <tr class="divide-x divide-indigo-400 text-slate-500 dark:text-gray-200">
      <th class="px-5 py-2">2</th>
      <td class="px-5 py-2">Design syntax</td>
      <td class="px-5 py-2"><span class="px-2 py-1 text-xs font-semibold text-orange-500 bg-orange-200">In Progress</span></td>
      <td class="px-5 py-2">Calvin Garrett</td>
      <td class="px-5 py-2">$7,546</td>
      <td class="px-5 py-2">
        <a href="#">
          <svg class="h-4 fill-slate-500 dark:fill-gray-200" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22 16.75c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75z" fill-rule="nonzero" /></svg>
        </a>
      </td>
    </tr>
    <tr class="divide-x divide-indigo-400 text-slate-500 dark:text-gray-200">
      <th class="px-5 py-2">3</th>
      <td class="px-5 py-2">Configurable resources</td>
      <td class="px-5 py-2"><span class="px-2 py-1 text-xs font-semibold text-green-600 bg-green-300">Done</span></td>
      <td class="px-5 py-2">Florence Guzman</td>
      <td class="px-5 py-2">$1,350</td>
      <td class="px-5 py-2">
        <a href="#">
          <svg class="h-4 fill-slate-500 dark:fill-gray-200" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22 16.75c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75z" fill-rule="nonzero" /></svg>
        </a>
      </td>
    </tr>
    <tr class="divide-x divide-indigo-400 text-slate-500 dark:text-gray-200">
      <th class="px-5 py-2">4</th>
      <td class="px-5 py-2">Implement extensions</td>
      <td class="px-5 py-2"><span class="px-2 py-1 text-xs font-semibold text-orange-500 bg-orange-200">In Progress</span></td>
      <td class="px-5 py-2">Maritza Blanda</td>
      <td class="px-5 py-2">$4,521</td>
      <td class="px-5 py-2">
        <a href="#">
          <svg class="h-4 fill-slate-500 dark:fill-gray-200" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22 16.75c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75zm0-5c0-.414-.336-.75-.75-.75h-18.5c-.414 0-.75.336-.75.75s.336.75.75.75h18.5c.414 0 .75-.336.75-.75z" fill-rule="nonzero" /></svg>
        </a>
      </td>
    </tr>
  </tbody>
</table>

      

<div>
  <p class="text-2xl font-bold dark:text-gray-300">Payments</p>
  <table class="w-full text-left">
    <thead class="text-sm text-gray-700 uppercase dark:text-gray-300">
      <tr class="border-b">
        <th class="py-2">All</th>
        <th class="py-2">Name</th>
        <th class="py-2">email</th>
        <th class="py-2">
          <div class="flex">
            <span>Total</span>
            <button type="submit">
              <svg class="h-5 fill-gray-400 hover:fill-slate-300" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m5.214 14.522s4.505 4.502 6.259 6.255c.146.147.338.22.53.22s.384-.073.53-.22c1.754-1.752 6.249-6.244 6.249-6.244.144-.144.216-.334.217-.523 0-.193-.074-.386-.221-.534-.293-.293-.766-.294-1.057-.004l-4.968 4.968v-14.692c0-.414-.336-.75-.75-.75s-.75.336-.75.75v14.692l-4.979-4.978c-.289-.289-.761-.287-1.054.006-.148.148-.222.341-.221.534 0 .189.071.377.215.52z" fill-rule="nonzero" /></svg>
            </button>
            <button type="submit">
              <svg class="h-5 fill-gray-400 hover:fill-slate-300" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m18.787 9.473s-4.505-4.502-6.259-6.255c-.147-.146-.339-.22-.53-.22-.192 0-.384.074-.531.22-1.753 1.753-6.256 6.252-6.256 6.252-.147.147-.219.339-.217.532.001.19.075.38.221.525.292.293.766.295 1.056.004l4.977-4.976v14.692c0 .414.336.75.75.75.413 0 .75-.336.75-.75v-14.692l4.978 4.978c.289.29.762.287 1.055-.006.145-.145.219-.335.221-.525.002-.192-.07-.384-.215-.529z" fill-rule="nonzero" /></svg>
            </button>
          </div>
        </th>
        <th class="py-2">
          <div class="flex">
            <span>Last Payment</span>
            <button type="submit">
              <svg class="h-5 fill-gray-400 hover:fill-slate-300" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m5.214 14.522s4.505 4.502 6.259 6.255c.146.147.338.22.53.22s.384-.073.53-.22c1.754-1.752 6.249-6.244 6.249-6.244.144-.144.216-.334.217-.523 0-.193-.074-.386-.221-.534-.293-.293-.766-.294-1.057-.004l-4.968 4.968v-14.692c0-.414-.336-.75-.75-.75s-.75.336-.75.75v14.692l-4.979-4.978c-.289-.289-.761-.287-1.054.006-.148.148-.222.341-.221.534 0 .189.071.377.215.52z" fill-rule="nonzero" /></svg>
            </button>
          </div>
        </th>
      </tr>
    </thead>
    <tbody class="dark:text-gray-300">
      <tr class="text-gray-600 border-b dark:text-gray-300">
        <td>
          <div class="flex items-center">
            <input id="checkbox-table-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded" />
            <label for="checkbox-table-1" class="sr-only">checkbox</label>
          </div>
        </td>
        <td class="py-2">James L. Coombs</td>
        <td class="py-2 font-light text-gray-500 dark:text-gray-300">jameslcoombs@example.com</td>
        <td class="py-2">€33.44</td>
        <td class="py-2">Jan 08, 2023</td>
      </tr>
      <tr class="text-gray-600 border-b dark:text-gray-300">
        <td>
          <div class="flex items-center">
            <input id="checkbox-table-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded" />
            <label for="checkbox-table-2" class="sr-only">checkbox</label>
          </div>
        </td>
        <td class="py-2">Peter Smith</td>
        <td class="py-2 font-light text-gray-500 dark:text-gray-300">psmith@example.com</td>
        <td class="py-2">€12.23</td>
        <td class="py-2">Jan 02, 2023</td>
      </tr>
    </tbody>
  </table>
  <div class="flex justify-between py-2 mt-4 text-sm text-gray-500 dark:text-gray-300">
    <span>123 results</span>
    <div>
      <a href="/previous" class="p-2 ml-2 border rounded shadow">Previous</a>
      <a href="/next" class="p-2 ml-2 text-gray-800 border rounded shadow dark:text-gray-100">Next</a>
    </div>
  </div>
</div>

      

<div>
  <p class="text-lg font-bold dark:text-gray-300">Report</p>
  <p class="py-2 text-sm text-gray-500 dark:text-gray-300">Jan 1, 2022 - Jan 31, 2022</p>
  <table class="w-full text-left text-[0.95rem]">
    <thead class="text-sm text-gray-700 dark:text-gray-300">
      <tr class="border-b">
        <th class="py-4">Name</th>
        <th class="py-4 text-right">Quantity</th>
        <th class="py-4 text-right">Price</th>
        <th class="py-4 text-right">Sum Total</th>
      </tr>
    </thead>
    <tbody>
      <tr class="text-gray-500 border-b dark:text-gray-300">
        <td class="py-4 text-black dark:text-gray-300">James L. Coombs</td>
        <td class="py-4 font-light text-right text-gray-500 dark:text-gray-300">33</td>
        <td class="py-4 text-right">€33.44</td>
        <td class="py-4 text-right">€1,234.55</td>
      </tr>
      <tr class="text-gray-500 border-b dark:text-gray-300">
        <td class="py-4 text-black dark:text-gray-300">Peter Smith</td>
        <td class="py-4 font-light text-right text-gray-500 dark:text-gray-300">13</td>
        <td class="py-4 text-right">€12.23</td>
        <td class="py-4 text-right">€4,324.73</td>
      </tr>
      <tr class="text-gray-500 dark:text-gray-300">
        <td class="py-4 text-black"></td>
        <td class="py-4 font-light text-right text-gray-500 dark:text-gray-300"></td>
        <td class="py-4 text-right">Subtotal</td>
        <td class="py-4 text-right">€8,324.73</td>
      </tr>
      <tr class="text-gray-500 dark:text-gray-300">
        <td class="py-4 text-black"></td>
        <td class="py-4 font-light text-right text-gray-500 dark:text-gray-300"></td>
        <td class="py-4 text-right">Tax (20%)</td>
        <td class="py-4 text-right">€1,324.73</td>
      </tr>
      <tr class="font-bold text-gray-500 dark:text-gray-300">
        <td class="py-4 text-black"></td>
        <td class="py-4 font-light text-right text-gray-500 dark:text-gray-300"></td>
        <td class="py-4 text-right">Total</td>
        <td class="text-right py-k">€1,324.73</td>
      </tr>
    </tbody>
  </table>
</div>

      

<table class="w-full text-sm text-left bg-white shadow">
  <thead class="text-gray-600 bg-gray-50 dark:bg-gray-600 dark:bg-gray-400 dark:text-gray-200">
    <tr class="text-left uppercase">
      <th class="p-4">Order</th>
      <th class="p-4">Invoice</th>
      <th class="p-4">Items</th>
      <th class="p-4">Customer</th>
      <th class="p-4">Status</th>
      <th class="p-4">Payment</th>
      <th class="p-4">Total</th>
      <th class="p-4">Action</th>
    </tr>
  </thead>

  <tbody class="dark:bg-gray-500 dark:text-gray-300">
    <tr class="border-b dark:border-gray-600">
      <td class="p-4">100010070</td>
      <td class="p-4">INV1991</td>
      <td class="p-4">Items</td>
      <td class="p-4">John Doe</td>
      <td class="p-4">pending</td>
      <td class="p-4">Stripe</td>
      <td class="p-4">123.99</td>
      <td class="p-4">
        <a href="#" class="px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-500">view</a>
      </td>
    </tr>
  </tbody>

  <tbody class="bg-blue-100 dark:bg-gray-500 dark:text-gray-300">
    <tr class="border-b dark:border-gray-700">
      <td class="p-4">100010070</td>
      <td class="p-4">INV1991</td>
      <td class="p-4">Items</td>
      <td class="p-4">John Doe</td>
      <td class="p-4">pending</td>
      <td class="p-4">Stripe</td>
      <td class="p-4">1339.44</td>
      <td class="p-4">
        <a href="#" class="px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-500">view</a>
      </td>
    </tr>
  </tbody>

  <tbody class="dark:bg-gray-500 dark:text-gray-300">
    <tr>
      <td class="p-4">100010070</td>
      <td class="p-4">INV1991</td>
      <td class="p-4">Items</td>
      <td class="p-4">John Doe</td>
      <td class="p-4">canceled</td>
      <td class="p-4">PayPal</td>
      <td class="p-4">23.11</td>
      <td class="p-4">
        <a href="#" class="px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-500">view</a>
      </td>
    </tr>
  </tbody>
</table>