Tailwind table example
Web2tailwind.com
Output
Code
<!DOCTYPE html>
<html>
<head>
<title>Animated Login Form</title>
<link href="/assets/css/tailwind.min.css" rel="stylesheet">
<script src="/assets/js/alpine.min.js" defer></script>
<link rel="stylesheet" href="/assets/iconfont/material-icons.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="h-screen flex justify-center bg-gray-300" style="font-family:Roboto">
<div class=" w-4/5 md:w-3/5 bg-white rounded-lg shadow-lg">
<div class="block overflow-x-auto m-6">
<table class="w-full text-left rounded-lg">
<thead>
<tr class="text-gray-800 border border-b-0">
<th class="px-4 py-3">#</th>
<th class="px-4 py-3">Name</th>
<th class="px-4 py-3">Avatar</th>
<th class="px-4 py-3">Email</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Action</th>
</tr>
</thead>
<tbody>
<tr class="w-full font-light text-gray-700 bg-gray-100 whitespace-no-wrap border border-b-0">
<td class="px-4 py-4">1</td>
<td class="px-4 py-4">Bedram Tamang</td>
<td class="px-4 py-4">
<img class="h-6 w-6 rounded-full"
src="/assets/docs/master/image-01.jpg">
</td>
<td class="px-4 py-4">[email protected]</td>
<td class="px-4 py-4">
<span class="text-sm bg-green-500 text-white rounded-full px-2 py-1">Active</span>
</td>
<td class="text-center">
<a href="#"><span class="fill-current text-green-500 material-icons">edit</span></a>
<a href="#"><span class="fill-current text-red-500 material-icons">highlight_off</span></a>
</td>
</tr>
<tr class="w-full font-light text-gray-700 whitespace-no-wrap border">
<td class="px-4 py-4">2</td>
<td class="px-4 py-4">Taylor Otwel</td>
<td class="px-4 py-4">
<img class="h-6 w-6 rounded-full"
src="/assets/docs/master/image-01.jpg">
</td>
<td class="px-4 py-4">[email protected]</td>
<td class="px-4 py-4">
<span class="text-sm bg-yellow-500 text-white rounded-full px-2 py-1">Pending</span>
</td>
<td class="text-center">
<a href="#"><span class="fill-current text-green-500 material-icons">edit</span></a>
<a href="#"><span class="fill-current text-red-500 material-icons">highlight_off</span></a>
</td>
</tr>
<tr class="w-full font-light text-gray-700 bg-gray-100 whitespace-no-wrap border">
<td class="px-4 py-4">3</td>
<td class="px-4 py-4">Adam wathan</td>
<td class="px-4 py-4">
<img class="h-6 w-6 rounded-full"
src="/assets/docs/master/image-01.jpg">
</td>
<td class="px-4 py-4">[email protected]</td>
<td class="px-4 py-4">
<span class="text-sm bg-red-500 text-white rounded-full px-2 py-1">Not Active</span>
</td>
<td class="text-center">
<a href="#"><span class="fill-current text-green-500 material-icons">edit</span></a>
<a href="#"><span class="fill-current text-red-500 material-icons">highlight_off</span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
© 2019 - 2022
Web2tailwind.com