import Layout from '../components/layout'

export default function Prices() {
  return (
    <Layout>
      <h1 className="mb-3 text-xl font-extrabold">Preise</h1>
      <table className="divide-y divide-gray-200">
        <thead className="bg-gray-50">
          <tr>
            <th
              scope="col"
              className="w-2/3 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              Gefahrene km
            </th>
            <th
              scope="col"
              className="w-1/3 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              Preis/km
            </th>
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-gray-200">
          <tr>
            <td className="px-6 py-4">bis 200 km</td>
            <td className="px-6 py-4">
              0,42 €<br />
              inklusive Sprit
            </td>
          </tr>
          <tr>
            <td className="px-6 py-4">201 - 1000 km</td>
            <td className="px-6 py-4">0,25 €</td>
          </tr>
          <tr>
            <td className="px-6 py-4">1001 - 2000 km</td>
            <td className="px-6 py-4">0,20 €</td>
          </tr>
          <tr>
            <td className="px-6 py-4">ab 2001 km</td>
            <td className="px-6 py-4">0,18 €</td>
          </tr>
        </tbody>
      </table>
    </Layout>
  )
}