src/pages/index.tsx

import styles from "../styles.module.css";

const Home = () => {
 return (
    <div className="text-gray-900 text-center">
      <h1 className="text-6xl m-20 mb-6 font-bold">Todo List</h1>
      <div className="min-h-$screen-2 bg-white px-6 py-4">
        <h2 className="text-5xl font-medium">Create a New Task:</h2>
        <form className="mx-auto w-full md:w-3/4">
          <input
            type="text"
            className="block bg-white text-gray-900 font-medium text-xl mb-2 mt-4"
            placeholder="Task Title"
          />
          <input
            type="date"
            className="block bg-white text-gray-900 font-medium text-sm mb-2 mt-4"
            placeholder="Task Deadline"
          />
          <button className="block font-medium text-sm text-white transition duration-150 ease-in-out bg-blue-500 hover:bg-blue-600 border-blue-500 hover:border-blue-600 font-logo rounded px-2 mt-6 py-2">
            Create Task
          </button>
        </form>
      </div>
    </div>
 );
};

export { Home };