JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>

<head>
    <title>my To-Do List</title>
    <link rel="stylesheet" type="text/css" href="myStyleSheet.css">
</head>

<body>
    <div id="body-header">
        <div id="header-p1">
            <p id="app-name">my To-Do List</p>
            <textarea id="ta_item-input" rows="1" cols="50" maxlength="50" placeholder=" Add new item" autocomplete="on" onkeypress="submitItem(event,this)"></textarea>
            <button id="b_item-input" type="button" onclick="addNewItem(this)"><span>+</span></button>
            <span id="b_separator"></span>
            <button id="b_clear-all" onclick="clearAll(this)"><span>Clear All</span></button>
        </div>
        <div id="header-p2">
        </div>
        <div id="header-p3">
        </div>
    </div>
        
    <div id="body-list">
        <ul id="item-list"><li class="item" id="0"><label class="item-label"><form class="item-form"><input type="checkbox" class="item-checkbox"><span class="item-text">Coffee</span><img src="trash2.png" alt="Oops! o.O" class="item-delete-img" onclick="deleteItem(this)"><br></form>
            </label>
          </li>
        </ul>
    </div>
    
    <div id="body-footer">
    </div>
    <br>

    <script src="myTDLFunctions.js"></script>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Pacifico');

html {
    height: 100%;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0;
}

body {
    background-color: #FFFFFF;
    height: 97.9%;
    margin: 8px 8px 0px 8px;
    
    /*
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: -10px;
    
    background: -webkit-repeating-linear-gradient(141deg, red 0%, white 2%, blue 30%);
    background: -o-linear-gradient(141deg, red 0%, white 30%, blue 70%);
    background: -moz-linear-gradient(141deg, red 0%, white 30%, blue 70%);
    background: linear-gradient(172deg, #FFFFFF 0%, #FAFAFA 100%);
    */
    
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

#body-header {
    height: 18%;

    background-color: #F5F5F5;
    border-radius: 15px 15px 0px 0px;
    border: none;
    margin: 0;
    padding: 12px 0px 0px 0px;
    
}

#header-p1 {
    height: 92%;
}

#app-name {
    cursor: pointer;
    display: inline;
    margin: 0px 0px 0px 20px;
    
    background: none;
    padding: 0px 15px 5px 0px;
    border-bottom: 3px solid #212121;
    border-bottom-right-radius: 15.5px;
    
    color: #212121;
    text-align: center;
    vertical-align: top;
    font-family: 'Pacifico', serif;
    font-size: 40px;
}

#app-options {
    margin: 0px;
}

#ta_item-input {
    resize: none;
    overflow: hidden;
    width: 550px;
    display: inline;
    border-style: solid;
    border-width: 6px 4px 6px 50px;
    border-color: #EAEAEA;
    border-radius: 1px;
    padding: 10px 10px 10px;
    margin: 10px 0px 0px 40px;
    font-size: 25px;
    font-family:...

JavaScript

var countEle = 0;
var imgSrc = "trash2.png";

var blurElement = function(element) {
    if(element !== null){
        element.blur();
    }
};

var addNewItem = function(button)
{
    blurElement(button);
    
    countEle++;
    
    var textArea = document.getElementById("ta_item-input"); 
    
    var taValue = textArea.value;
    
    if (taValue !== "") {
        var listEle = document.createElement("li");
        listEle.setAttribute("class", "item");
        listEle.setAttribute("id", countEle);

        var labelEle = document.createElement("label");
        labelEle.setAttribute("class", "item-label");
        
        var formEle = document.createElement("form");
        formEle.setAttribute("class", "item-form");

        var inputEle = document.createElement("input");
        inputEle.setAttribute("type", "checkbox");
        inputEle.setAttribute("class", "item-checkbox");

        var spanEle = document.createElement("span");
        spanEle.setAttribute("class", "item-text");
        spanEle.innerHTML = taValue;

        var imgEle = document.createElement("img");
        imgEle.setAttribute("src", imgSrc);
        imgEle.setAttribute("alt", "Oops!");
        imgEle.setAttribute("class", "item-delete-img");
        imgEle.setAttribute("onclick", "deleteItem(this)"); 
        
        var brEle = document.createElement("br");

        formEle.appendChild(inputEle);
        formEle.appendChild(spanEle);
        formEle.appendChild(imgEle);
        formEle.appendChild(brEle);

        labelEle.appendChild(formEle);
        listEle.appendChild(labelEle);

        var itemList = document.getElementById("item-list");
        itemList.insertBefore(listEle, itemList.firstChild);
        
        textArea.value = "";
        blurElement(textArea);
        
        reOrderList(itemList);
        setItemBgColor(itemList);
    }
};

var reOrderList = function(itemList) {
    for(var i = 0; i < itemList.childElementCount; i++){
       ...