JSFiddle - React, Tailwind, and code Playground

HTML

<div class="todo-list">

    <h1>Bucket List App</h1>
    <ul>
        <li>
            <label>
                <input type="checkbox"/>
                <span>See the Pyramids</span>
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" checked/>
                <span>Climb a Tree</span>
            </label>
        </li>
    </ul>
    
    <form>            
        <input class="new-item-input" type="text" placeholder="Enter New Item..."/>
        <button class="new-item-button" type="submit">Add</button>
    </form>

</div>

CSS

html{
    background: grey 
url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/use_your_illusion.png');
}

.todo-list{
    width: 250px;
    margin: 50px auto 0 auto; 
    background: grey;
    border-bottom: 2px solid #aaaaaa;
    border-radius: 4px;
    box-shadow: 0 6px 10px rgba(0,0,0,0.3);
}

h1{
    margin: 0;
    text-align: center;
    color: green;
    font-size: 22px;
    background: black;
    padding: 5px 0 5px 0;
}

ul{
    padding: 0;
    list-style: none;
    margin: 0;
}

li{
    padding: 5px;
    border-bottom: 1px solid#aaa;
}

label{
    color: white;
}

input:checked {
    opacity: 0.5;

}

input:checked + span{
    color: blue;                        
    text-decoration: line-through;            
}

form{
    background: #000;
    padding: 10px;
}

form input{
    width: 177px;
}

JavaScript

//When button is clicked...
    
$('.new-item-button').click(function(e){
    
    e.preventDefault();
    
// Take text from input    
    
    var text = $('.new-item-input').val();
   
    
//Create the todo html.       
    
    var html = '<li>' +
                   '<label>' +
                        '<input type="checkbox"/> ' +
                        '<span>'+text+'</span>' +
                   '</label>' +
               '</li>';
        
    $('ul').append(html);
    $('.new-item-input').val('').focus();
        
    
    
});