JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <title>Dong's To Do List</title>
</header>
<body>
    <h1 style = "font-family: helvetica; text-align: center;">Dong's To Do List</h1>
    <hr color = "#a2000c" width = "span" size = "5px" align = "left" />
    <div id = "list">
        <ul>
            <li>Threaten Bart</li>
            <li>Do Laundry</li>
            <li>Buy Corn Holders</li>
        </ul>    
    </div>
    <div id = "bottom">
        <input type="text" id="entry"/>    
        <button class = "send">Add to list</button>
    </div>
</body>

CSS

#list{
    position: relative;
    top: 10px;
    left: 5%;
    width: 90%;
}

#bottom{
    position: fixed;
    bottom: 5%;
    left: 5%;
}


li{
    font-size: 16px;
    font-family: courier;
    margin-top: 5px;
}

JavaScript

$(document).ready(function(){
    $(document).on('click','li',function(){
        $(this).remove();
    }); 
    $("button").click(function(){
        var entry = $("#entry").val();
        $("<li></li>", {
            text: entry
        }).appendTo("#list ul");   
        $("#entry").val("");
    });    
});