Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
9.4 kB
3
Indexable
Never
export default function table() {
  return (
    
    
<div className="relative overflow-x-auto shadow-md sm:rounded-lg">
    <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 classNameName="flex justify-center table-fixed items text-center">
//   <table classNameName="table-auto border-collapse border border-slate-500 rounded-lg">
//     <thead>
//       <tr>
//         <th classNameName="border-2 border-solid border-gray-700 px-1 py-4 font-bold">Id</th>
//         <th classNameName="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Aircraft</th>
//         <th classNameName="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Service Buletin</th>
//         <th classNameName="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Title</th>
//         <th classNameName="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Revision</th>
//         <th classNameName="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Rev. Date</th>
//         <th classNameName="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Category</th>
//         <th classNameName="border-2 border-solid border-gray-700 px-6 py-4 font-bold">Effectifity</th>
//       </tr>
//     </thead>
//     <tbody classNameName="border-2 border-solid border-gray-700 px-4 py-2">
//       <tr>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">1</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">N219</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">219-220-2023</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">(Sampel) service Bulletin for N219</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">-</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">Dec 19, 2021</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">Mandatory</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">N003</td>
//       </tr>
//       <tr>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">2</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">N219</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">219-220-2023</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">(Sampel) service Bulletin for N219</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">-</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">Dec 19, 2021</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">Mandatory</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">N003</td>
//       </tr>
//       <tr>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">3</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">N219</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">219-220-2023</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">(Sampel) service Bulletin for N219</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">-</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">Dec 19, 2021</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">Mandatory</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">N003</td>
//       </tr>
//       <tr>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">4</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">N219</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">219-220-2023</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">(Sampel) service Bulletin for N219</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">-</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">Dec 19, 2021</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">Mandatory</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">N003</td>
//       </tr>
//       <tr>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">5</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">N219</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">219-220-2023</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">(Sampel) service Bulletin for N219</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">-</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">Dec 19, 2021</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">Mandatory</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">N003</td>
//       </tr>
//       <tr>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">6</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">N219</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">219-220-2023</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">(Sampel) service Bulletin for N219</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-4 py-2">-</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">Dec 19, 2021</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">Mandatory</td>
//         <td classNameName="border-2 border-solid border-gray-700 px-2 py-2">N003</td>
//       </tr>
//     </tbody>
//   </table>
// </div>

  )
}