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...