create-vanjs
Version:
🍦 Quick tool for scaffolding your first VanJS project
176 lines (175 loc) • 6.03 kB
JSX
export const Page = () => {
return (
<div class="h-screen">
<div class="p-4 m-auto">
<h1 class="text-5xl font-bold my-8">Users</h1>
<div class="overflow-x-auto">
<table class="table">
<thead>
<tr>
<th>
<label>
<input type="checkbox" class="checkbox" />
</label>
</th>
<th>Name</th>
<th>Job</th>
<th>Favorite Color</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th>
<label>
<input type="checkbox" class="checkbox" />
</label>
</th>
<td>
<div class="flex items-center gap-3">
<div class="avatar">
<div class="mask mask-squircle h-12 w-12">
<img
src="https://img.daisyui.com/images/profile/demo/2@94.webp"
alt="Avatar Tailwind CSS Component"
/>
</div>
</div>
<div>
<div class="font-bold">Hart Hagerty</div>
<div class="text-sm opacity-50">United States</div>
</div>
</div>
</td>
<td>
Zemlak, Daniel and Leannon<br />
<span class="badge badge-ghost badge-sm">
Desktop Support Technician
</span>
</td>
<td>Purple</td>
<th>
<button type="button" class="btn btn-ghost btn-xs">
details
</button>
</th>
</tr>
<tr>
<th>
<label>
<input type="checkbox" class="checkbox" />
</label>
</th>
<td>
<div class="flex items-center gap-3">
<div class="avatar">
<div class="mask mask-squircle h-12 w-12">
<img
src="https://img.daisyui.com/images/profile/demo/3@94.webp"
alt="Avatar Tailwind CSS Component"
/>
</div>
</div>
<div>
<div class="font-bold">Brice Swyre</div>
<div class="text-sm opacity-50">China</div>
</div>
</div>
</td>
<td>
Carroll Group<br />
<span class="badge badge-ghost badge-sm">Tax Accountant</span>
</td>
<td>Red</td>
<th>
<button type="button" class="btn btn-ghost btn-xs">
details
</button>
</th>
</tr>
<tr>
<th>
<label>
<input type="checkbox" class="checkbox" />
</label>
</th>
<td>
<div class="flex items-center gap-3">
<div class="avatar">
<div class="mask mask-squircle h-12 w-12">
<img
src="https://img.daisyui.com/images/profile/demo/4@94.webp"
alt="Avatar Tailwind CSS Component"
/>
</div>
</div>
<div>
<div class="font-bold">Marjy Ferencz</div>
<div class="text-sm opacity-50">Russia</div>
</div>
</div>
</td>
<td>
Rowe-Schoen<br />
<span class="badge badge-ghost badge-sm">
Office Assistant I
</span>
</td>
<td>Crimson</td>
<th>
<button type="button" class="btn btn-ghost btn-xs">
details
</button>
</th>
</tr>
<tr>
<th>
<label>
<input type="checkbox" class="checkbox" />
</label>
</th>
<td>
<div class="flex items-center gap-3">
<div class="avatar">
<div class="mask mask-squircle h-12 w-12">
<img
src="https://img.daisyui.com/images/profile/demo/5@94.webp"
alt="Avatar Tailwind CSS Component"
/>
</div>
</div>
<div>
<div class="font-bold">Yancy Tear</div>
<div class="text-sm opacity-50">Brazil</div>
</div>
</div>
</td>
<td>
Wyman-Ledner<br />
<span class="badge badge-ghost badge-sm">
Community Outreach Specialist
</span>
</td>
<td>Indigo</td>
<th>
<button type="button" class="btn btn-ghost btn-xs">
details
</button>
</th>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Job</th>
<th>Favorite Color</th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
);
};