JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://use.fontawesome.com/ef3486ccf2.js"></script>
<body>
	<div class="container">
		<h1>To-Do List</h1>
		<header class="main-header">
			<input type="text" placeholder="Enter you activity..." class="field-todo">
			<div class="buttons">
				<a href="#" class="add-todo"><i class="fa fa-plus" aria-hidden="true"></i></a>
				<a href="#" class="clean-value"><i class="fa fa-trash" aria-hidden="true"></i></a>
			</div>
		</header>
		<ul class="todo"></ul>
		<span class="count">0</span>
	</div>	
	<script src="js/custom.js"></script>
</body>

CSS

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background: #2D936C;
	color: #fff;
	font-family: 'Varela Round', sans-serif;
}


h1 {
  font-size: 72px;
  margin: 50px 0;
  text-align: center;
}

input[type="text"] {
	background: transparent;
	font-size: 20px;
	border: none;
	outline: none;
	font-family: 'Varela Round', sans-serif;
	width: 100%;
	padding: 15px 15px 15px 0;
	text-indent: 20px;
	color: #fff;
	transition: all 0.3s;
	border-bottom: 1px solid #fff;
}

input[type="text"]:focus {
	border-bottom: 1px solid #000;
}

input[type="text"]::-webkit-input-placeholder {
	color: #fff;
}

input[type="text"]:-moz-input-placeholder {
	color: #fff;
}

input[type="text"]:-ms-input-placeholder {
	color: #fff;
}

.container {
	margin: 0 auto;
	max-width: 820px;
}

.main-header {
	position: relative;
	margin-bottom: 20px;
}

.main-header input {
	padding-right: 100px;
}

/*Buttons add todo && clean value*/
.buttons {
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -15px;
}

.buttons a {
	padding-right: 15px;
	margin-right: 11px;
	border-right: 1px solid #fff;
	display: inline-block;
	transition: all 0.3s;
	font-size: 16px;
	cursor: pointer;
}

.buttons a:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: 0;
}

.fa {
	font-size: 30px;
	color: #fff;
	transition: all 0.2s;
}

.fa:hover {
	color: #000;
	transform: scale(1.2);
}

/*Style todo list*/
.todo {
	margin: 0;
	padding: 0;
	list-style: none;
}

.todo li {
	position: relative;
	background: #FFFFFF;
	padding: 1rem;
	border-radius: 10px;
	text-align: left;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 20px;
	color: #000;
	padding: 20px 120px 20px 20px;
	transition: all 0.6s;
	box-shadow: 0 1px 9px #143a2b;
}

.todo .fa {
	color: #2D936C;
}

.todo li.fill {
	text-decoration: line-through;
}

.todo li.fill i.fa-check {
	color: #000;
	transform: scale(1.2);
}

.todo .fa:hover {
	color: #000;
}

.todo .buttons {
	right: 20px;
}

.todo .buttons a {
	border-color:...

JavaScript

/*Функция которая проверяет поле ввода, и запускает соответствующею функции если все ок*/
document.querySelector('.add-todo').addEventListener('click', function(e){
	var field = document.querySelector('.field-todo');

	if (field.value && field.value !== ' ') {
		addTodo(field);
		field.value = '';
	}
});

document.querySelector('.field-todo').addEventListener('keydown', function(e){
	if(e.keyCode === 13 && this.value && this.value !== ' ') {
		addTodo(this);
		this.value = '';
	}
});

//Очистка значения поля по клику
document.querySelector('.clean-value').addEventListener('click', function(e){
	var field = document.querySelector('.field-todo');

	field.value = '';
});

//Функция добавления списка
function addTodo(field) {

	var fieldValue = field.value;
	var todoList = document.querySelector('.todo');

	var elements = {
		li: document.createElement('li'),
		buttonsWrap: document.createElement('div'),
		addCheck: document.createElement('a'),
		deleteTodo: document.createElement('a'),
		faCheck: document.createElement('i'),
		faTrash: document.createElement('i'),
	};

	//Присваиваем элементам нужные классы
	elements.buttonsWrap.classList.add('buttons');
	elements.addCheck.classList.add('add-check');
	elements.deleteTodo.classList.add('delete-todo');
	elements.faCheck.classList.add('fa', 'fa-check');
	elements.faTrash.classList.add('fa', 'fa-trash');

	//Добавляем элементы в нужные теги
	elements.addCheck.appendChild(elements.faCheck);
	elements.deleteTodo.appendChild(elements.faTrash);

	elements.buttonsWrap.appendChild(elements.addCheck);
	elements.buttonsWrap.appendChild(elements.deleteTodo);

	elements.li.innerHTML = elements.li.innerHTML + fieldValue;
	elements.li.appendChild(elements.buttonsWrap);
	
	todoList.insertBefore(elements.li, todoList.firstChild);

	


	document.querySelector('.delete-todo').addEventListener('click', deleteTodo);
	document.querySelector('.add-check').addEventListener('click', completeTodo);
}

//Функция выполненния задачи
function...