Tables

	Customer	Email	Status	Group	Spend	Action
	John Smith	john.smith@example.com	Active	Gold	$132	edit
	Jane Doe	jane.doe@example.com	Active	Platinum	$442	edit
	Michael Brown	michael.brown@example.com	Active	Silver	$54	edit
	Sarah Johnson	sarah.johnson@example.com	Active	Gold	$154	edit

            
<!-- Table default -->
<table class="table-default table-hover">
  <thead>
    <tr class="shadow-inset-fixed rounded-t bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950">
      <th>
        <div class="flex items-center justify-center">
          <label class="neu-checkbox relative inline-flex items-center justify-center">
            <input type="checkbox" name="check_x" id="checkall" class="h-5 w-5 rounded accent-black dark:accent-white" checked>
            <span class="check-icon"></span>
          </label>
        </div>
      </th>
      <th>Customer</th>
      <th>Email</th>
      <th>Status</th>
      <th>Group</th>
      <th>Spend</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody class="shadow-inset-fixed rounded-b bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950">
    <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
      <td class="!px-0">
        <div class="flex items-center justify-center">
          <label class="neu-checkbox relative inline-flex items-center justify-center">
            <input type="checkbox" class="h-5 w-5 rounded accent-black dark:accent-white">
            <span class="check-icon"></span>
          </label>
        </div>
      </td>
      <td>John Smith</td>
      <td>
        <a href="mailto:john.smith@example.com">john.smith@example.com</a>
      </td>
      <td>
        <div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
      </td>
      <td>
        <div class="flex flex-row items-center gap-1">
          Gold
        </div>
      </td>
      <td>$132</td>
      <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
    </tr>
    <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
      <td class="!px-0">
        <div class="flex items-center justify-center">
          <label class="neu-checkbox relative inline-flex items-center justify-center">
            <input type="checkbox" class="h-5 w-5 rounded accent-black dark:accent-white">
            <span class="check-icon"></span>
          </label>
        </div>
      </td>
      <td>Jane Doe</td>
      <td>
        <a href="mailto:jane.doe@example.com">jane.doe@example.com</a>
      </td>
      <td>
        <div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
      </td>
      <td>
        <div class="flex flex-row items-center gap-1">
          Platinum
        </div>
      </td>
      <td>$442</td>
      <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
    </tr>
    <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
      <td class="!px-0">
        <div class="flex items-center justify-center">
          <label class="neu-checkbox relative inline-flex items-center justify-center">
            <input type="checkbox" class="h-5 w-5 rounded accent-black dark:accent-white">
            <span class="check-icon"></span>
          </label>
        </div>
      </td>
      <td>Michael Brown</td>
      <td>
        <a href="mailto:michael.brown@example.com">michael.brown@example.com</a>
      </td>
      <td>
        <div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
      </td>
      <td>
        <div class="flex flex-row items-center gap-1">Silver
        </div>
      </td>
      <td>$54</td>
      <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
    </tr>
    <tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
      <td class="!px-0">
        <div class="flex items-center justify-center">
          <label class="neu-checkbox relative inline-flex items-center justify-center">
            <input type="checkbox" class="h-5 w-5 rounded accent-black dark:accent-white">
            <span class="check-icon"></span>
          </label>
        </div>
      </td>
      <td>Sarah Johnson</td>
      <td>
        <a href="mailto:sarah.johnson@example.com">sarah.johnson@example.com</a>
      </td>
      <td>
        <div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
      </td>
      <td>
        <div class="flex flex-row items-center gap-1">
          Gold
        </div>
      </td>
      <td>$154</td>
      <td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
    </tr>
  </tbody>
</table>