index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IF=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Task List 2023</title>

        <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
        <link rel="stylesheet" href="main.css"/>

    </head>

    </head> 

    <body>

        <div class="   justify-center items-center">
            <header class="justify-center p-8 w-9/12 max-w-xl m-14 border-solid bg-gray-100  rounded-xl  shadow-[0px_4px_16px_rgba(17,17,26,0.1),_0px_8px_24px_rgba(17,17,26,0.1),_0px_16px_56px_rgba(17,17,26,0.1)] ">
                <h1 class="font-bold text-2xl">Task List  </h1>
                      
                <form  id="new-task-form" class="flex items-stretch flex-col m-1" id="new-task-form">
                    <input id="new-task-input" class="mt-4 block w-9/12 flex  border-solid border-2 border-gray-500 rounded-xl" type="text" placeholder="Enter new Task . . ."> 
                    <input id="new-task-submit" class="mt-4 block w-28 flex  border-solid border-2 border-gray-500 rounded-xl justify-center bg-pink-500 text-white cursor-pointer
                    " type="submit" form="form " value="Add Task"></input>
    
                </form>
            </header>
    
            <main class="p-8 w-9/12 max-w-xl m-14 border-solid bg-gray-100  rounded-xl  shadow-[0px_4px_16px_rgba(17,17,26,0.1),_0px_8px_24px_rgba(17,17,26,0.1),_0px_16px_56px_rgba(17,17,26,0.1)] ">
    
                <section class="flex items-stretch flex-col m-1 ">
    
                    <h2 class="font-bold text-xl">Task</h2>
    
                    <div id="tasks" class="flex mt-3  flex-col">
    
                        <div class="task " >
                            <div class="content ">
                                <input class="mt-4 block w-full flex  border-solid border-2 border-gray-500 rounded-xl"
                                    type="text"
                                    class="text"
                                    value="My shiny task"
                                    readonly/>
    
                            </div>
                            <div class="actions flex flex-row mt-3">
                                <button class="m-2  block w-28 flex   flex-row  border-solid border-2 border-gray-500 rounded-xl justify-center bg-green-500 text-white
                                " class="edit">Edit</button>
                                <button class=" m-2 block w-28 flex   flex-row  border-solid border-2 border-gray-500 rounded-xl justify-center bg-red-500 text-white
                                " class="delete">Delete</button>
                        
                            
                            </div>
                        </div>
                        
                    </div>
                    
                </section>
            </main>
        </div>
        

        <script src="todo.js" ></script>

    </body>