Untitled

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/style.css">
    <title>School App</title>
</head>
<body class="bg-gray-900 flex items-center justify-center">
    <div class="flex flex-col space-y-4">
<div class="bg-gray-900 text-white">
  <div class="overflow-x-auto pt-12">
    <h1 class="text-2xl font-boldmb-6">Grades</h1>
    <table class="w-full table-auto">
        <tr>
            <td>
                <a href="#kindergarten">Kindergarten</a>
            </td>
        </tr>
        <tr>
            <td>
            <a href="#first-grade">1st Grade</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#second-grade">2nd Grade</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#third-grade">3rd Grade</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#fourth-grade">4th Grade</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#fifth-grade">5th Grade</a>
            </td>
        </tr>
    </table>
  </div>

  <div class="overflow-x-auto">
    <h1 class="text-2xl font-bold mb-6">Kindergarten</h1>
    <table id="kindergarten" class="w-full table-auto">
      <thead>
        <tr class="bg-gray-800">
          <th class="px-4 py-2 text-left">Grade</th>
          <th class="px-4 py-2 text-left">Student</th>
          <th class="px-4 py-2 text-left">Actions</th>
        </tr>
      </thead>
      <tbody>

        <tr class="border-b border-gray-700">
          <td class="px-4 py-2">kindergarten</td>
          <td class="px-4 py-2">Test A</td>
          <td class="px-4 py-2">
            <a href="/student/2/edit" class="text-blue-400 hover:text-blue-300">Edit</a>
          </td>
        </tr>

      </tbody>
    </table>
  </div>
  <div class="overflow-x-auto">
    <h1 class="text-2xl font-bold mb-6">1st Grade</h1>
    <table id="first-grade" class="w-full table-auto">
      <thead>
        <tr class="bg-gray-800">
          <th class="px-4 py-2 text-left">Grade</th>
          <th class="px-4 py-2 text-left">Student</th>
          <th class="px-4 py-2 text-left">Actions</th>
        </tr>
      </thead>
      <tbody>

        <tr class="border-b border-gray-700">
          <td class="px-4 py-2">1st grade</td>
          <td class="px-4 py-2">Test B</td>
          <td class="px-4 py-2">
            <a href="/student/3/edit" class="text-blue-400 hover:text-blue-300">Edit</a>
          </td>
        </tr>

      </tbody>
    </table>
  </div>
  <div class="overflow-x-auto">
    <h1 class="text-2xl font-bold mb-6">2nd Grade</h1>
    <table id="second-grade" class="w-full table-auto">
      <thead>
        <tr class="bg-gray-800">
          <th class="px-4 py-2 text-left">Grade</th>
          <th class="px-4 py-2 text-left">Student</th>
          <th class="px-4 py-2 text-left">Actions</th>
        </tr>
      </thead>
      <tbody>

        <tr class="border-b border-gray-700">
          <td class="px-4 py-2">2nd grade</td>
          <td class="px-4 py-2">Test C</td>
          <td class="px-4 py-2">
            <a href="/student/4/edit" class="text-blue-400 hover:text-blue-300">Edit</a>
          </td>
        </tr>

      </tbody>
    </table>
  </div>
  <div class="overflow-x-auto">
    <h1 class="text-2xl font-bold mb-6">3rd Grade</h1>
    <table id="third-grade" class="w-full table-auto">
      <thead>
        <tr class="bg-gray-800">
          <th class="px-4 py-2 text-left">Grade</th>
          <th class="px-4 py-2 text-left">Student</th>
          <th class="px-4 py-2 text-left">Actions</th>
        </tr>
      </thead>
      <tbody>

        <tr class="border-b border-gray-700">
          <td class="px-4 py-2">3rd grade</td>
          <td class="px-4 py-2">Test D</td>
          <td class="px-4 py-2">
            <a href="/student/5/edit" class="text-blue-400 hover:text-blue-300">Edit</a>
          </td>
        </tr>

      </tbody>
    </table>
  </div>
  <div class="overflow-x-auto">
    <h1 class="text-2xl font-bold mb-6">4th Grade</h1>
    <table id="fourth-grade" class="w-full table-auto">
      <thead>
        <tr class="bg-gray-800">
          <th class="px-4 py-2 text-left">Grade</th>
          <th class="px-4 py-2 text-left">Student</th>
          <th class="px-4 py-2 text-left">Actions</th>
        </tr>
      </thead>
      <tbody>

        <tr class="border-b border-gray-700">
          <td class="px-4 py-2">4th grade</td>
          <td class="px-4 py-2">Test E</td>
          <td class="px-4 py-2">
            <a href="/student/6/edit" class="text-blue-400 hover:text-blue-300">Edit</a>
          </td>
        </tr>

      </tbody>
    </table>
  </div>
  <div class="overflow-x-auto">
    <h1 class="text-2xl font-bold mb-6">5th Grade</h1>
    <table id="fifth-grade" class="w-full table-auto">
      <thead>
        <tr class="bg-gray-800">
          <th class="px-4 py-2 text-left">Grade</th>
          <th class="px-4 py-2 text-left">Student</th>
          <th class="px-4 py-2 text-left">Actions</th>
        </tr>
      </thead>
      <tbody>

        <tr class="border-b border-gray-700">
          <td class="px-4 py-2">5th grade</td>
          <td class="px-4 py-2">Test F</td>
          <td class="px-4 py-2">
            <a href="/student/1/edit" class="text-blue-400 hover:text-blue-300">Edit</a>
          </td>
        </tr>

      </tbody>
    </table>
  </div>
</div>
    </div>
</body>
</html>