export function Dates() {
  return (
      <div className="mt-8 mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        <h2 className="text-4xl">Veřejné termíny</h2>
        <div className="mt-8 flow-root">
          <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
              <table className="min-w-full divide-y divide-gray-300">
                <thead>
                  <tr>
                    <th scope="col" className="py-3.5 pl-4 pr-3 text-left font-semibold text-gray-900 sm:pl-0">Místo</th>
                    <th scope="col" className="px-3 py-3.5 text-left font-semibold text-gray-900">Datum</th>
                    <th scope="col" className="px-3 py-3.5 text-left font-semibold text-gray-900">Volná místa?</th>
                    <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-0">
                      <span className="sr-only">Registrovat</span>
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  <tr>
                    <td className="whitespace-nowrap py-4 pl-4 pr-3 font-medium text-gray-900 sm:pl-0">Praha</td>
                    <td className="whitespace-nowrap px-3 py-4 text-gray-500">30. května 2023</td>
                    <td className="whitespace-nowrap px-3 py-4 text-gray-500">Ano</td>
                    <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right font-medium sm:pr-0">
                      <a href="#" className="underline">Registrovat<span className="sr-only">, na termín školení</span></a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
  )
}