JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
<h1>To do list</h1>
<section>
<form id="form" action="#" method="POST">
<input id="description" placeholder="Введите текст" type="text">
<input id="addinlist" type="submit" value="Добавить">
<button id="clear">Очистить</button>
</form>
</section>
</div>

<div id="alert"></div>
<ul id="todolist"></ul>

CSS

.header {
padding:20px 50px;
background-color: #d0d0d0;
text-align:center;
}

.header h1 {
padding:10px 20px;
text-transform:uppercase;
font: 30px/40px Georgia, Arial, sans-serif;
font-weight:600;
}

input[type=text] {
padding:10px;
min-width:43%;
border:1px solid #9a9a9a;
margin:0;
}

input[type=submit], button {
padding:10px 20px;
background: green;
margin:0;
color:#fff;
border:1px solid green;
font-weight:600;
}

input:hover, button:hover {
border:1px solid #000;
}

#todolist {
left:0;
overflow: hidden;
text-align: center;
top:0;
}

#todolist li {
position:relative;
display:inline-block;
list-style: none;
width: 80%;
text-align:left;
cursor:pointer;
padding: 10px 30px;
color:#fff;
background: #404040;
}

#todolist li:nth-child(odd) {
    background: #606060;
}

#todolist li:hover {
    background: #858585;
}

#alert{
padding:10px;
color:red;
text-align:center;
font-weight: bold;
}

.done-btn {
color:#fff;
position:absolute;
right:10%;
top:0;
padding:10px 15px;
}

.done-btn:hover {
  background-color: green;
  color: white;
}

.delete-btn {
color:#fff;
position:absolute;
right:0;
top:0;
padding:10px 15px;
}

.delete-btn:hover {
  background-color: #f44336;
  color: white;
}

.done {
    text-decoration: line-through;
}

.dell {
  display:none;
}

JavaScript

$('#alert').hide();
$("#addinlist").click( function(){
var Description = $('#description').val();
if($("#description").val() == '') {
$('#alert').html("Внимание! Введите запись в текстовое поле.");
$('#alert').fadeIn().delay(1500).fadeOut();
return false;
}
$('#todolist').prepend("<li>" + Description + " <a href='#' class='done-btn'>Сделано</a> <a href='#' class='delete-btn'>Удалить</a> </li>");

var other = $('#todolist').html();
localStorage.setItem('inlist', other);
return '';
});

var lastname = localStorage.getItem("inlist");
$('#todolist').html(lastname);

$('#clear').click( function() {
window.localStorage.clear();
location.reload(); return false;
});

$('.done-btn').on( 'click', function() {
  $(this).parent('li').addClass('done');
other = $('#todolist').html();
localStorage.setItem('inlist', other);
});

$('.delete-btn').on( 'click', function() {
  $(this).parent('li').fadeOut();
});