xxxxxxxxxx
//simple table
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full">
<thead class="bg-white border-b">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
#
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
First
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Last
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Handle
</th>
</tr>
</thead>
<tbody>
<tr class="bg-gray-100 border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Mark
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Otto
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@mdo
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Jacob
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Thornton
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@fat
</td>
</tr>
<tr class="bg-gray-100 border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
<td colspan="2" class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap text-center">
Larry the Bird
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
xxxxxxxxxx
//Dark theme
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
xxxxxxxxxx
//with hover efect
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full">
<thead class="bg-white border-b">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
#ID
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
Título
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
Contenido
</th>
</tr>
</thead>
<tbody>
@foreach ($posts as $post)
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
{{ $post->id }}
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
{{ $post->title }}
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
{{ $post->content }}
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
xxxxxxxxxx
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table
class="min-w-full text-left text-sm font-light text-surface dark:text-white">
<thead
class="border-b border-neutral-200 font-medium dark:border-white/10">
<tr>
<th scope="col" class="px-6 py-4">#</th>
<th scope="col" class="px-6 py-4">First</th>
<th scope="col" class="px-6 py-4">Last</th>
<th scope="col" class="px-6 py-4">Handle</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-neutral-200 dark:border-white/10">
<td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
<td class="whitespace-nowrap px-6 py-4">Mark</td>
<td class="whitespace-nowrap px-6 py-4">Otto</td>
<td class="whitespace-nowrap px-6 py-4">@mdo</td>
</tr>
<tr class="border-b border-neutral-200 dark:border-white/10">
<td class="whitespace-nowrap px-6 py-4 font-medium">2</td>
<td class="whitespace-nowrap px-6 py-4">Jacob</td>
<td class="whitespace-nowrap px-6 py-4">Thornton</td>
<td class="whitespace-nowrap px-6 py-4">@fat</td>
</tr>
<tr class="border-b border-neutral-200 dark:border-white/10">
<td class="whitespace-nowrap px-6 py-4 font-medium">3</td>
<td class="whitespace-nowrap px-6 py-4">Larry</td>
<td class="whitespace-nowrap px-6 py-4">Wild</td>
<td class="whitespace-nowrap px-6 py-4">@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
xxxxxxxxxx
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
Product name
</th>
<th scope="col" class="px-6 py-3">
Color
</th>
<th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
Category
</th>
<th scope="col" class="px-6 py-3">
Price
</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
Apple MacBook Pro 17"
</th>
<td class="px-6 py-4">
Silver
</td>
<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
Laptop
</td>
<td class="px-6 py-4">
$2999
</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
Microsoft Surface Pro
</th>
<td class="px-6 py-4">
White
</td>
<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
Laptop PC
</td>
<td class="px-6 py-4">
$1999
</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
Magic Mouse 2
</th>
<td class="px-6 py-4">
Black
</td>
<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
Accessories
</td>
<td class="px-6 py-4">
$99
</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
Google Pixel Phone
</th>
<td class="px-6 py-4">
Gray
</td>
<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
Phone
</td>
<td class="px-6 py-4">
$799
</td>
</tr>
<tr>
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
Apple Watch 5
</th>
<td class="px-6 py-4">
Red
</td>
<td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
Wearables
</td>
<td class="px-6 py-4">
$999
</td>
</tr>
</tbody>
</table>
</div>
xxxxxxxxxx
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
Product name
</th>
<th scope="col" class="px-6 py-3">
Color
</th>
<th scope="col" class="px-6 py-3">
Category
</th>
<th scope="col" class="px-6 py-3">
Price
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="px-6 py-4">
Silver
</td>
<td class="px-6 py-4">
Laptop
</td>
<td class="px-6 py-4">
$2999
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="px-6 py-4">
White
</td>
<td class="px-6 py-4">
Laptop PC
</td>
<td class="px-6 py-4">
$1999
</td>
</tr>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="px-6 py-4">
Black
</td>
<td class="px-6 py-4">
Accessories
</td>
<td class="px-6 py-4">
$99
</td>
</tr>
</tbody>
</table>
</div>
xxxxxxxxxx
<table class="table-fixed">
<thead>
<tr>
<th>Song</th>
<th>Artist</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
<td>Malcolm Lockyer</td>
<td>1961</td>
</tr>
<tr>
<td>Witchy Woman</td>
<td>The Eagles</td>
<td>1972</td>
</tr>
<tr>
<td>Shining Star</td>
<td>Earth, Wind, and Fire</td>
<td>1975</td>
</tr>
</tbody>
</table>