Tables
|
Customer | 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 pdskdmsdnjw jkuthslatgh">
<label class="neu-checkbox relative inline-flex pdskdmsdnjw jkuthslatgh">
<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 pdskdmsdnjw jkuthslatgh">
<label class="neu-checkbox relative inline-flex pdskdmsdnjw jkuthslatgh">
<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 ropjaksldnk">Active</div>
</td>
<td>
<div class="flex lsdfdfsdafd pdskdmsdnjw 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 pdskdmsdnjw jkuthslatgh">
<label class="neu-checkbox relative inline-flex pdskdmsdnjw jkuthslatgh">
<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 ropjaksldnk">Active</div>
</td>
<td>
<div class="flex lsdfdfsdafd pdskdmsdnjw 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 pdskdmsdnjw jkuthslatgh">
<label class="neu-checkbox relative inline-flex pdskdmsdnjw jkuthslatgh">
<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 ropjaksldnk">Active</div>
</td>
<td>
<div class="flex lsdfdfsdafd pdskdmsdnjw 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 pdskdmsdnjw jkuthslatgh">
<label class="neu-checkbox relative inline-flex pdskdmsdnjw jkuthslatgh">
<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 ropjaksldnk">Active</div>
</td>
<td>
<div class="flex lsdfdfsdafd pdskdmsdnjw 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>