JSFiddle - React, Tailwind, and code Playground

HTML

<h1><input type="text" id="new-text" placeholder="Input text here..."/></h1>
<ul id="todo-list">

</ul>
<br>
<input type="checkbox" id="toggle-all"/>
<br>
<br>
<button type="checkbox" id="clearcompleted">Clear completed</button>

CSS

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.4em;
    background: #f5f5f5;
    color: #4d4d4d;
    min-width: 230px;
    max-width: 550px;
    margin: 0 auto;
    font-weight: 300;
}

button, input[type="checkbox"] {
    outline: none;
}

#new-text {
    background: #fff;
    font-size: 30px;
    margin: 130px 0 40px 0;
    position: relative;
}

#toggle-all {
    position: relative;
    top: 0px;
    left: 0px;
    width: 40px;
    height: 20px;
    text-align: center;
}

#todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#todo-list li {
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid #ededed;
}

#todo-list li .toggle {
    text-align: center;
    width: 40px;
    
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    appearance: none;
}

#todo-list li span {
    white-space: pre;
    padding: 15px 60px 15px 15px;
    margin-left: 45px;
    display: block;
    line-height: 1.2;
}

#todo-list li.completed span {
    color: #d9d9d9;
    text-decoration: line-through;

}

#todo-list li .destroy {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto 0;
    font-size: 30px;
    color: #cc9a9a;
    margin-bottom: 11px;
}

#todo-list li .destroy:hover {
    color: #af5b5e;
}

#todo-list li .destroy:after {
    content: '×';
}

#todo-list li:hover .destroy {
    display: block;
}

JavaScript

function addListItem()
    {

    var text = $('#new-text').val();
        $("#todo-list").append('<li ><input type="checkbox" class="toggle"/ ><span class="text">'
    + text + ' </span><button class="destroy"></button></li>');
    $("#new-text").val('');

    }

function clearCompleted()
    {

    $("#todo-list .toggle:checked").parent().remove();

    }

function deleteItem()
    {

    $(this).parent().remove();

    }

function completed() {
    if
    (
         $(this).parent().css('textDecoration') == 'line-through' )
    {
         $(this).parent().css('textDecoration', 'none');
         $(this).parent().css('opacity', '1');
    }

    else

    {
         $(this).parent().css('textDecoration', 'line-through');
         $(this).parent().css('opacity', '0.50');
    }

    }


$(document).ready(function(){

    $('#new-text').keyup(function(e)
    {

        if (e.keyCode === 13)

        {
            addListItem();
        }

    });

    $(document).on('click', '.destroy', deleteItem);

    $("#toggle-all").click(function ()

    {

        $('input:checkbox').not(this).prop('checked', this.checked);
        if ( $('li').css('textDecoration') == 'line-through' )
        {
            $('li').css('textDecoration', 'none');
            $('li').parent().css('opacity', '1');
        }

        else

        {
            $('li').css('textDecoration', 'line-through');
            $('li').parent().css('opacity', '0.5');
        }

    });

    $(document).on('click', '.toggle', completed);

    $("#clearcompleted").click(clearCompleted);

    $('#todo-list').on('dblclick', 'span', function ()

        {

        position = $(this).position();
        var input = $("<input type='text' class='in-edit-text' style='position:absolute'>").insertAfter($(this));
        $(input)
            .val($(this).text())
            .css({left: position.left, top: position.top})
            .focus()
        ;
        $(this).find(".text").hide();
       ...