Untitled

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