index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Indexed DB Todo Application</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Include the Tailwind JS file -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="p-10">
      <h1 class="text-center font-bold text-3xl pb-10">
        Indexed DB Todo Application
      </h1>

      <div class="overflow-x-auto">
        <table class="min-w-full text-left text-sm font-light">
          <thead class="border-b font-medium dark:border-neutral-500">
            <tr>
              <th scope="col" class="px-6 py-4">#</th>
              <th scope="col" class="px-6 py-4">Name</th>
              <th scope="col" class="px-6 py-4">Image</th>
              <th scope="col" class="px-6 py-4">update</th>
              <th scope="col" class="px-6 py-4">Edit</th>
            </tr>
          </thead>

          <tbody id="table-body"></tbody>
        </table>
      </div>

      <div class="mx-auto w-full max-w-[550px] py-10">
        <input id="todo-id" type="hidden" />
        <div class="mb-5">
          <label
            for="todo-name"
            class="mb-3 block text-base font-medium text-[#07074D]"
          >
            Todo Name
          </label>
          <input
            type="text"
            id="todo-name"
            name="todo-name"
            placeholder="Todo Name"
            class="w-full rounded-md border border-[#e0e0e0] bg-white p-3 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
          />
        </div>

        <div class="mb-5">
          <label
            for="todo-image"
            class="mb-3 block text-base font-medium text-[#07074D]"
          >
            Todo Image
          </label>
          <input
            type="file"
            id="todo-image"
            name="todo-image"
            class="w-full rounded-md border border-[#e0e0e0] bg-white p-3 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
          />
        </div>

        <button
          id="submit-btn"
          class="hover:shadow-form rounded-md bg-[#6A64F1] py-3 px-8 text-base font-semibold text-white outline-none"
        >
          Submit
        </button>
      </div>
    </div>

    <script type="module" src="./src/main.ts"></script>
  </body>
</html>