make it more beautiful and colourful also add linear time graph with each node as station with arrival time,departure time and station name

﻿ <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Untitled</title>
  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
  </style>
</head>
<body>
  <div class="bg-gray-100">
    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
      <nav class="flex h-10 items-center justify-between">
        <div class="flex-1 flex items-center">
          <a href="#" class="text-lg font-medium text-gray-900">O2A - Thampanoor - Main Bus Stand</a>
        </div>
        <div class="flex-1 flex items-center justify-end">
          <div class="ml-4">
            <a href="#" class="text-sm font-medium text-gray-500 hover:text-gray-700">3C Magenta KSRTC Clockwise</a>
          </div>
        </div>
      </nav>
      <div class="mt-8">
        <div class="max-w-4xl mx-auto">
          <div class="flex flex-col">
            <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
              <div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
                <div class="overflow-hidden">
                  <table class="min-w-full">
                    <thead class="border-b">
                      <tr>
                        <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                          Time
                        </th>
                        <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                          Stop
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:22 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">O2A - Thampanoor - Main Bus Stand</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:23 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">40B - Aristo</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:24 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">39A- Model School</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:26 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">41- Panavila</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:27 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">38D- Bakery Jn.</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:28 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">07A- Palayam-Chandrasekharan Nair Stadium</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:29 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">09A-PMG- Students Centre</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:31 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">108A- Plamoodu</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:32 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">109B- Pattom Psc Office</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:33 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">110A- Pattom-LIC</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:35 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">111A- Pattom- St. Mary's HSS</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:36 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">112C- Kesavadasapuram</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:37 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">110B- Pattom-LIC</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:39 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">111B- Pattom- St. Mary's HSS</td>
                      </tr>
                      <tr class="border-b">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7:40 AM</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">109C- Pattom</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>﻿