You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tailwind-ai/application_ui/lists/tables/with_veritcal_lines.html

192 lines
8.6 KiB
HTML

<div class="px-4 sm:px-6 lg:px-8">
<div class="sm:flex sm:items-center">
<div class="sm:flex-auto">
<h1 class="text-base font-semibold text-gray-900">Users</h1>
<p class="mt-2 text-sm text-gray-700">
A list of all the users in your account including their name,
title, email and role.
</p>
</div>
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<button
type="button"
class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Add user
</button>
</div>
</div>
<div class="mt-8 flow-root">
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div
class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
>
<table class="min-w-full divide-y divide-gray-300">
<thead>
<tr class="divide-x divide-gray-200">
<th
scope="col"
class="py-3.5 pr-4 pl-4 text-left text-sm font-semibold text-gray-900 sm:pl-0"
>
Name
</th>
<th
scope="col"
class="px-4 py-3.5 text-left text-sm font-semibold text-gray-900"
>
Title
</th>
<th
scope="col"
class="px-4 py-3.5 text-left text-sm font-semibold text-gray-900"
>
Email
</th>
<th
scope="col"
class="py-3.5 pr-4 pl-4 text-left text-sm font-semibold text-gray-900 sm:pr-0"
>
Role
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr class="divide-x divide-gray-200">
<td
class="py-4 pr-4 pl-4 text-sm font-medium whitespace-nowrap text-gray-900 sm:pl-0"
>
Lindsay Walton
</td>
<td
class="p-4 text-sm whitespace-nowrap text-gray-500"
>
Front-end Developer
</td>
<td
class="p-4 text-sm whitespace-nowrap text-gray-500"
>
lindsay.walton@example.com
</td>
<td
class="py-4 pr-4 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pr-0"
>
Member
</td>
</tr>
<tr class="divide-x divide-gray-200">
<td
class="py-4 pr-4 pl-4 text-sm font-medium whitespace-nowrap text-gray-900 sm:pl-0"
>
Courtney Henry
</td>
<td
class="p-4 text-sm whitespace-nowrap text-gray-500"
>
Designer
</td>
<td
class="p-4 text-sm whitespace-nowrap text-gray-500"
>
courtney.henry@example.com
</td>
<td
class="py-4 pr-4 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pr-0"
>
Admin
</td>
</tr>
<tr class="divide-x divide-gray-200">
<td
class="py-4 pr-4 pl-4 text-sm font-medium whitespace-nowrap text-gray-900 sm:pl-0"
>
Tom Cook
</td>
<td
class="p-4 text-sm whitespace-nowrap text-gray-500"
>
Director of Product
</td>
<td
class="p-4 text-sm whitespace-nowrap text-gray-500"
>
tom.cook@example.com
</td>
<td
class="py-4 pr-4 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pr-0"
>
Member
</td>
</tr>
<tr class="divide-x divide-gray-200">
<td
class="py-4 pr-4 pl-4 text-sm font-medium whitespace-nowrap text-gray-900 sm:pl-0"
>
Whitney Francis
</td>
<td
class="p-4 text-sm whitespace-nowrap text-gray-500"
>
Copywriter
</td>
<td
class="p-4 text-sm whitespace-nowrap text-gray-500"
>
whitney.francis@example.com
</td>
<td
class="py-4 pr-4 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pr-0"
>
Admin
</td>
</tr>
<tr class="divide-x divide-gray-200">
<td
class="py-4 pr-4 pl-4 text-sm font-medium whitespace-nowrap text-gray-900 sm:pl-0"
>
Leonard Krasner
</td>
<td
class="p-4 text-sm whitespace-nowrap text-gray-500"
>
Senior Designer
</td>
<td
class="p-4 text-sm whitespace-nowrap text-gray-500"
>
leonard.krasner@example.com
</td>
<td
class="py-4 pr-4 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pr-0"
>
Owner
</td>
</tr>
<tr class="divide-x divide-gray-200">
<td
class="py-4 pr-4 pl-4 text-sm font-medium whitespace-nowrap text-gray-900 sm:pl-0"
>
Floyd Miles
</td>
<td
class="p-4 text-sm whitespace-nowrap text-gray-500"
>
Principal Designer
</td>
<td
class="p-4 text-sm whitespace-nowrap text-gray-500"
>
floyd.miles@example.com
</td>
<td
class="py-4 pr-4 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pr-0"
>
Member
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>