export default function CardTable() {
  return (
    <div className="relative w-full overflow-x-auto border-2 border-dark/60 bg-dark shadow-md sm:rounded-lg">
      <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400 ">
        <thead className="z-1 sticky top-0 bg-light-dark text-xs uppercase text-white">
          <tr>
            <th scope="col" className="px-6 py-3">
              Exercice
            </th>
            <th scope="col" className="px-6 py-3">
              Tentative
            </th>
            <th scope="col" className="px-6 py-3">
              Score
            </th>
            <th scope="col" className="px-6 py-3">
              Dernier essai
            </th>
            <th scope="col" className="px-6 py-3">
              <span className="sr-only">Reprendre</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr className=" border-b bg-dark hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-600">
            <th
              scope="row"
              className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
            >
              Exercice 1
            </th>
            <td className="px-6 py-4">30</td>
            <td className="px-6 py-4">300</td>
            <td className="px-6 py-4">10/10/2010</td>
            <td className="px-6 py-4 text-right">
              <a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
                Reprendre
              </a>
            </td>
          </tr>
          <tr className="border-b bg-dark  hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-600">
            <th
              scope="row"
              className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
            >
              Exercice 1
            </th>
            <td className="px-6 py-4">40</td>
            <td className="px-6 py-4">300</td>
            <td className="px-6 py-4">10/10/2010</td>
            <td className="px-6 py-4 text-right">
              <a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
                Reprendre
              </a>
            </td>
          </tr>
          <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
            <th
              scope="row"
              className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
            >
              Exercice 1
            </th>
            <td className="px-6 py-4">60</td>
            <td className="px-6 py-4">300</td>
            <td className="px-6 py-4">10/10/2010</td>
            <td className="px-6 py-4 text-right">
              <a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
                Reprendre
              </a>
            </td>
          </tr>
          <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
            <th
              scope="row"
              className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
            >
              Exercice 1
            </th>
            <td className="px-6 py-4">60</td>
            <td className="px-6 py-4">300</td>
            <td className="px-6 py-4">10/10/2010</td>
            <td className="px-6 py-4 text-right">
              <a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
                Reprendre
              </a>
            </td>
          </tr>
          <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
            <th
              scope="row"
              className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
            >
              Exercice 1
            </th>
            <td className="px-6 py-4">60</td>
            <td className="px-6 py-4">300</td>
            <td className="px-6 py-4">10/10/2010</td>
            <td className="px-6 py-4 text-right">
              <a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
                Reprendre
              </a>
            </td>
          </tr>
          <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
            <th
              scope="row"
              className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
            >
              Exercice 1
            </th>
            <td className="px-6 py-4">60</td>
            <td className="px-6 py-4">300</td>
            <td className="px-6 py-4">10/10/2010</td>
            <td className="px-6 py-4 text-right">
              <a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
                Reprendre
              </a>
            </td>
          </tr>
          <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
            <th
              scope="row"
              className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
            >
              Exercice 1
            </th>
            <td className="px-6 py-4">60</td>
            <td className="px-6 py-4">300</td>
            <td className="px-6 py-4">10/10/2010</td>
            <td className="px-6 py-4 text-right">
              <a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
                Reprendre
              </a>
            </td>
          </tr>
          <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
            <th
              scope="row"
              className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
            >
              Exercice 1
            </th>
            <td className="px-6 py-4">60</td>
            <td className="px-6 py-4">300</td>
            <td className="px-6 py-4">10/10/2010</td>
            <td className="px-6 py-4 text-right">
              <a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
                Reprendre
              </a>
            </td>
          </tr>
          <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
            <th
              scope="row"
              className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
            >
              Exercice 1
            </th>
            <td className="px-6 py-4">60</td>
            <td className="px-6 py-4">300</td>
            <td className="px-6 py-4">10/10/2010</td>
            <td className="px-6 py-4 text-right">
              <a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
                Reprendre
              </a>
            </td>
          </tr>
          <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
            <th
              scope="row"
              className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
            >
              Exercice 1
            </th>
            <td className="px-6 py-4">60</td>
            <td className="px-6 py-4">300</td>
            <td className="px-6 py-4">10/10/2010</td>
            <td className="px-6 py-4 text-right">
              <a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
                Reprendre
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}