JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Todo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&amp;display=swap'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.standalone.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container m-5 p-2 rounded mx-auto bg-light shadow">
    <!-- App title section -->
    <div class="row m-1 p-4">
        <div class="col">
            <div class="p-1 h1 text-primary text-center mx-auto display-inline-block">
                <h1>JavaScript Todo App</h1>
            </div>
        </div>
    </div>
    <!-- Create todo section -->
    <div class="row m-1 p-3">
        <div class="col col-11 mx-auto">
            <div class="row bg-white rounded shadow-sm p-2 add-todo-wrapper align-items-center justify-content-center">
                <div class="col">
                    <input id="addtodoinput" class="form-control form-control-lg border-0 add-todo-input bg-transparent rounded" type="text" placeholder="Add new ..">
                </div>
                <div class="col-auto m-0 px-2 d-flex align-items-center">
                    <label class="text-secondary my-2 p-0 px-1 view-opt-label due-date-label d-none">Due date not set</label>
                    <i class="fa fa-calendar-times-o my-2 px-1 text-danger btn clear-due-date-button d-none" data-toggle="tooltip" data-placement="bottom" title="Clear Due...

CSS

body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.6;
}

.add-todo-input,
.edit-todo-input {
    outline: none;
}

.add-todo-input:focus,
.edit-todo-input:focus {
    border: none !important;
    box-shadow: none !important;
}

.view-opt-label,
.date-label {
    font-size: 0.8rem;
}

.edit-todo-input {
    font-size: 1.7rem !important;
}

.todo-actions {
    visibility: hidden !important;
}

.todo-item:hover .todo-actions {
    visibility: visible !important;
}

.todo-item.editing .todo-actions .edit-icon {
    display: none !important;
}

JavaScript

// Veriables
let addTodoInput = document.querySelector("#addtodoinput")
let addTodoButton = document.querySelector("#addtodobutton")
let editButton = document.querySelector(".fa-pencil")
let deleteButton = document.querySelector(".fa-trash-o")
let addDateText = document.querySelector(".date-label")
let todoItemList = document.querySelector("#todos")


let normalTodoItem = (id, value, checked, date) => {
    return `<section data-id="${id}" class="row px-3 align-items-center todo-item rounded">
    <div class="col-auto m-1 p-0 d-flex align-items-center">
        <h2 class="m-0 p-0">
            <i class="fa ${checked == "true" ? "fa-check-square-o" : "fa-square-o"} text-primary btn m-0 p-0 checkicon" data-toggle="tooltip" data-placement="bottom"></i>
        </h2>
    </div>
    <div class="col px-1 m-1 d-flex align-items-center">
        <input type="text" class="form-control form-control-lg border-0 edit-todo-input bg-transparent rounded px-3" readonly value="${value}" />
    </div>
    <div class="col-auto m-1 p-0 todo-actions">
        <div class="row d-flex align-items-center justify-content-end">
            <h5 class="m-0 p-0 px-2">
                <i class="fa fa-pencil text-info btn m-0 p-0" data-toggle="tooltip" data-placement="bottom"></i>
            </h5>
            <h5 class="m-0 p-0 px-2">
                <i class="fa fa-trash-o text-danger btn m-0 p-0" data-toggle="tooltip" data-placement="bottom"></i>
            </h5>
        </div>
        <div class="row todo-created-info">
            <div class="col-auto d-flex align-items-center pr-2">
                <i class="fa fa-info-circle my-2 px-2 text-black-50 btn" data-toggle="tooltip" data-placement="bottom"></i>
                <label class="date-label my-2 text-black-50">${date}</label>
            </div>
        </div>
    </div>
</section>`
}

// System ID
if(!localStorage.getItem("systemID")){
    localStorage.setItem("systemID", 1)
} 

// Get Todo...