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 js-field-todo">
			<div class="buttons">
				<a href="#" class="add-todo js-add-todo"><i class="fa fa-plus" aria-hidden="true"></i></a>
				<a href="#" class="clean-value js-clean-value"><i class="fa fa-trash" aria-hidden="true"></i></a>
			</div>
		</header>
		<ul class="todo"></ul>
		<span class="count">0</span>
	</div>	
</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

(function () {
	var field = document.querySelector('.js-field-todo'),
			countElement = document.querySelector('.count');

	//По клику на кнопку добавляем элемент
	function buttonAddTodo() {
		var fieldValue = field.value;

		if (isFieldClear(fieldValue)) {
			addTodo(fieldValue);
			clearField();
		}

	}

	//По нажатию клавиши enter добавляем элемент
	function enterAddTodo(e) {
		var fieldValue = field.value;

		if(e.keyCode === 13 && isFieldClear(fieldValue)) {
			addTodo(fieldValue);
			clearField();
		}

	}

	//Проверка поля на пробелы
	function isFieldClear(fieldValue) {
		return fieldValue.replace(/\s/g, '');
	}

	//Очистка значения поля по клику
	function clearField() {
		field.value = '';
	}

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

		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',...