JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDIV" class="to-do-header">
  <h2 class="table-title">To Do</h2>
  <input id="myInput" placeholder="What do you want to do?">
  <span class="addBtn">Add</span>
</div>
  
<ul id="myUL">
  <li>Wake up</li>
  <li>Meeting with the team</li>
  <li>Have an amazing lunch</li>
  <li>Finsish the project</li>
  <li>Get some pizza</li>
  <li>Go to sleep</li>
</ul>

CSS

/* Avoid inline styles just add/remove the following
   class when something needs to be hidden/shown  */
.hidden { display:none; }

#myUL {
    position: absolute;
    width: 32rem;
    margin-left: 10rem;
    margin-top: 24rem;
    padding: 0;
    list-style-type: none;
}
  
#myUL li {
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    background: #eee;
    font-size: 18px;
    transition: 0.2s;
  
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
  
#myUL li:nth-child(odd) {
    background: #f9f9f9;
}
  
#myUL li:hover {
    background: #ddd;
}
  
#myUL li.checked {
    background: #888;
    color: #fff;
    text-decoration: line-through;
}
  
#myUL li.checked::before {
    content: '';
    position: absolute;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    top: 10px;
    left: 16px;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
}
  
.close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}
  
.close:hover {
    background-color: #f44336;
    color: white;
}
  
.to-do-header {
    position: absolute;
    width: 30rem;
    margin-top: 13.5rem;
    margin-left: 10rem; 
    padding: 1rem 1rem 1rem 1rem;
    background-color: #9fa77f;
    color: white;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
  
.to-do-header:after {
    content: "";
    display: table;
    clear: both;
}

.table-title {
    margin-bottom: 0.6rem;
    font-family: 'Quicksand', sans-serif;
}
  
#myInput {
    font-family: 'Montserrat', sans-serif;
    padding: 0.6rem;
    margin: 0;
    border: none;
    border-radius: 0;
    width: 75%;
    padding: 10px;
    float: left;
    font-size: 16px;
}
  
.addBtn {
    font-family: 'Quicksand', sans-serif;
    padding: 0.6rem;
    width: 25%;
    background: #d9d9d9;
    color:...

JavaScript

// When the page is ready for interaction, check to see if
// a list is present in localStorage and, if so, restore it.
const theList = document.querySelector("#myUL");
let ls = localStorage.getItem("list");
if(ls){
  myUL.innerHTML = ls; // Restore the list from localStorage
}

// Do youre event binding in JavaScript, not with HTML event attributes like onclick
document.querySelector("span.addBtn").addEventListener("click", newElement);


// Create a "close" button and append it to each list item
// >>>> DON'T USE GETELEMENTSBYTAGNAME as it an old legacy API
// >>>> USE QUERYSELECTORALL WHICH ALLOWS FOR FOREACH LOOPING
document.querySelectorAll("LI").forEach(function(element){
  const span = document.createElement("SPAN");
  span.classList.add("close");
  span.textContent = "\u00D7";
  element.appendChild(span);
});

// Click on a close button to hide the current list item
const close = document.querySelectorAll(".close");
close.forEach(function(element){
  element.addEventListener("click", function(){
    // YOU SHOULD BE REMOVING THE ELEMENT NOT JUST HIDING IT
    this.parentElement.remove();
    // UPDATE LOCAL STORAGE 
    localStorage.setItem("list", myUL.innerHTML);
  });
});

// Add a "checked" symbol when clicking on a list item
document.querySelector('ul').addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
});  //  >>> the second argument (false) is the default

const theInput = document.getElementById("myInput");

// Create a new list item when clicking on the "Add" button
function newElement() {
  var li = document.createElement("li");
  // No need to explicitly create a text node and then append it. 
  // Just set the textContent property and be done.
  if (theInput.value === '') {
    alert("You must write something!");
  } else {
    li.textContent = theInput.value;
    theList.appendChild(li);
    // UPDATE LOCAL STORAGE 
    localStorage.setItem("list", myUL.innerHTML);
  }
...