JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top" class="topContainer">
        <label for="todoInput">
            <input id="todoInput" type="text" size="50">
        </label>
        <button id="addButton" class="addButton">Add</button>
    </div>
    
    <div id="middle" class="middleContainer">
        <ul id="todoList" class="middleTodoList"></ul>
    </div>

CSS

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    label {
        word-break: break-all;
    }
    
    input[type=checkbox]:checked + label {
        text-decoration: line-through;
        width: 11.3rem;
    }
    
    input[type=checkbox]:not(checked) + label {
        text-decoration: none;
        width: 11.3rem;
    }
    
    .addButton {
        margin-left: 0.2em;
    }
    
    .topContainer {
        justify-content: center;
        align-items: center;
        min-height: 5vh;
        display: flex;
    }
    
    .middleContainer {
        justify-content: center;
        align-items: center;
        display: flex;
    }
    
    .middleTodoList {
        min-width: 24.5rem;
        list-style: none;
    }
    
    li {
        border: 1px solid black;
        border-radius: 0.5rem;
        max-width: 24.5rem;
        margin-top: 0.5rem;
        padding: 0.3rem;
        color: black;
    }
    
    li label {
        padding-left: 0.5em;
    }
    
    .iconPlaceholder {
       float: right;
    }

JavaScript

const todoInput = document.getElementById('todoInput');
    const addButton = document.getElementById('addButton');
    const todoList = document.getElementById('todoList');
    
    function createListElementByEnter(event) {
        if (event.code === 'Enter') {
            addButton.click();
        }
    }
    
    function createListElementByButton() {
        const checkBox = document.createElement('input');
        checkBox.setAttribute('type', 'checkbox');
        checkBox.setAttribute('id', todoInput.value);
    
        const itemLabel = document.createElement('label');
        itemLabel.setAttribute('for', todoInput.value);
    
        const iconPlaceholder = document.createElement('i');
        iconPlaceholder.classList.add('iconPlaceholder');
        iconPlaceholder.innerHTML = '<i class="fas fa-trash-alt"></i>';
    
        const bottomDivision = document.getElementById('middle');
        const listElement = document.createElement('li');
        const todoInputValue = todoInput.value;
    
        if (todoInputValue) {
            saveItemsToLocalStorageList(todoInputValue, checkBox);
    
            itemLabel.append(todoInputValue);
            listElement.append(checkBox, itemLabel, iconPlaceholder);
            todoList.append(listElement);
            document.body.appendChild(bottomDivision);
        }
    
        todoInput.value = '';
    }
    
    function getItemsFromLocalStorage() {
        const localStorageElements = JSON.parse(localStorage.getItem('listElements'));
    
        if (localStorageElements !== null) {
            localStorageElements.forEach(element => {
                const checkBox = document.createElement('input');
                checkBox.setAttribute('type', 'checkbox');
                checkBox.setAttribute('id', element.itemValue);
                
                if(element.checkboxState){
                  checkBox.setAttribute('checked', element.checkboxState);
                }
    
                const...