Tables
Light (Based on tailwindui.com)
| Name | Title | Status | Role | |
|---|---|---|---|---|
Jane Cooper
jane.cooper@example.com
|
Regional Paradigm Technician
Optimization
|
Active | Admin | Edit |
<div class="overflow-x-auto">
<div class="py-2 align-middle inline-block min-w-full">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-200">
<tr>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-600 uppercase tracking-wider">
Name
</th>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-600 uppercase tracking-wider">
Title
</th>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-600 uppercase tracking-wider">
Status
</th>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-600 uppercase tracking-wider">
Role
</th>
<th class="px-6 py-3 bg-gray-50"></th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
alt="">
</div>
<div class="ml-4">
<div class="text-sm leading-5 font-medium text-gray-900">
Jane Cooper
</div>
<div class="text-sm leading-5 text-gray-500">
jane.cooper@example.com
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="text-sm leading-5 text-gray-900">Regional Paradigm Technician
</div>
<div class="text-sm leading-5 text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
Admin
</td>
<td
class="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Dark (Based on tailwindui.com)
| Name | Title | Status | Role | |
|---|---|---|---|---|
|
Jane Cooper
jane.cooper@example.com
|
Regional Paradigm Technician
Optimization
|
Active | Admin | Edit |
<div class="overflow-x-auto">
<div class="py-2 align-middle inline-block min-w-full">
<div class="shadow overflow-hidden border-b border-gray-900 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-900">
<thead class="bg-gray-800">
<tr>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-400 uppercase tracking-wider">
Name
</th>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-400 uppercase tracking-wider">
Title
</th>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-400 uppercase tracking-wider">
Status
</th>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-400 uppercase tracking-wider">
Role
</th>
<th class="px-6 py-3 bg-gray-50"></th>
</tr>
</thead>
<tbody class="bg-gray-900 divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
alt="">
</div>
<div class="ml-4">
<div class="text-sm leading-5 font-medium text-gray-200">
Jane Cooper
</div>
<div class="text-sm leading-5 text-gray-500">
jane.cooper@example.com
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="text-sm leading-5 text-gray-200">Regional Paradigm Technician
</div>
<div class="text-sm leading-5 text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-green-100">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
Admin
</td>
<td
class="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
<a href="#" class="text-gray-600 hover:text-gray-500">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>