Untitled
unknown
plain_text
2 years ago
9.4 kB
2
Indexable
import React from "react";
export default function Table() {
return (
<div className="flex flex-col justify-center items-center">
<div className="relative overflow-x-auto shadow-md sm:rounded-lg mb-8">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">
Product name
</th>
<th scope="col" className="px-6 py-3">
Color
</th>
<th scope="col" className="px-6 py-3">
Category
</th>
<th scope="col" className="px-6 py-3">
Price
</th>
<th scope="col" className="px-6 py-3">
<span className="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody>
<tr className="bg-dark border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17
</th>
<td className="px-6 py-4">
Silver
</td>
<td className="px-6 py-4">
Laptop
</td>
<td className="px-6 py-4">
$2999
</td>
<td className="px-6 py-4 text-right">
<a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td className="px-6 py-4">
White
</td>
<td className="px-6 py-4">
Laptop PC
</td>
<td className="px-6 py-4">
$1999
</td>
<td className="px-6 py-4 text-right">
<a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr className="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td className="px-6 py-4">
Black
</td>
<td className="px-6 py-4">
Accessories
</td>
<td className="px-6 py-4">
$99
</td>
<td className="px-6 py-4 text-right">
<a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
<div className="flex justify-center">
<table className="table-auto border-collapse border border-slate-500 rounded-lg">
<thead>
<tr>
<th className="border-2 border-solid border-gray-700 px-1 py-4 font-bold">Id</th>
<th className="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Aircraft</th>
<th className="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Service Buletin</th>
<th className="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Title</th>
<th className="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Revision</th>
<th className="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Rev. Date</th>
<th className="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Category</th>
<th className="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Effectifity</th>
</tr>
</thead>
<tbody className="border-2 border-solid border-gray-700 px-4 py-2">
<tr>
<td className="border-2 border-solid border-gray-700 px-2 py-2">1</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">N219</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">219-220-2023</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">(Sampel) service Bulletin for N219</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">-</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">Dec 19, 2021</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">Mandatory</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">N003</td>
</tr>
<tr>
<td className="border-2 border-solid border-gray-700 px-2 py-2">2</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">N219</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">219-220-2023</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">(Sampel) service Bulletin for N219</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">-</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">Dec 19, 2021</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">Mandatory</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">N003</td>
</tr>
<tr>
<td className="border-2 border-solid border-gray-700 px-2 py-2">3</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">N219</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">219-220-2023</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">(Sampel) service Bulletin for N219</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">-</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">Dec 19, 2021</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">Mandatory</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">N003</td>
</tr>
<tr>
<td className="border-2 border-solid border-gray-700 px-2 py-2">4</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">N219</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">219-220-2023</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">(Sampel) service Bulletin for N219</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">-</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">Dec 19, 2021</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">Mandatory</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">N003</td>
</tr>
<tr>
<td className="border-2 border-solid border-gray-700 px-2 py-2">5</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">N219</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">219-220-2023</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">(Sampel) service Bulletin for N219</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">-</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">Dec 19, 2021</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">Mandatory</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">N003</td>
</tr>
<tr>
<td className="border-2 border-solid border-gray-700 px-2 py-2">6</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">N219</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">219-220-2023</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">(Sampel) service Bulletin for N219</td>
<td className="border-2 border-solid border-gray-700 px-4 py-2">-</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">Dec 19, 2021</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">Mandatory</td>
<td className="border-2 border-solid border-gray-700 px-2 py-2">N003</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
Editor is loading...