JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	<div class="row">
		<div class="medium-8 medium-centered columns">
			<div class="todo-container">
				<h2>Todo-list</h2>
				<input type="text" id="todo-input" placeholder="Hit enter to add new" autofocus>

				<div class="all-posts">

				</div>
			</div>
	</div>

CSS

.submit-button {
	border: solid 1px #007295;
}

.delete-button {
	padding: 10px 15px 11px 15px;
	position: absolute;
	right: 0;
	top: 0;
	margin-bottom: 0;
	max-height: 100%;
}

.all-posts {

}

.all-posts p {
	margin: 5px 0 5px 10px;
	font-size: 19px;
	font-weight: 300;
}

.single-post {
	background-color: #EFEFEF;
	position: relative;
	margin-bottom: 7px;
}

.single-post:hover {
	cursor: pointer;
}

input[type="text"] {
	font-size: 19px;
	font-weight: 300;
	margin-bottom: 10px;
	margin-right: 30px;
}

.clear-all {
	float: right;
	display: none;
}

input[type="checkbox"] {
	float: left;
	margin: 13px;
}

JavaScript

(function($, window, undefined) {

	var tasks = [],
	todoInput = $("#todo-input");
    
    $(".all-posts").on("click", ".single-post .delete-button", function() {
        deleteTask($(this).data('id'));
    });

	todoInput.on('keypress', function(e) {
		if (e.keyCode == 13) {
			createTask();
		}
	});

	function createTask() {
		var input = todoInput.val();

		if (input.length !== 0) {
			tasks.push(input);
		}

		todoInput.val("");

		renderTasks();
	}

	function renderTasks() {
		var allPosts = $(".all-posts");
		allPosts.empty();

		for (var i = 0; i < tasks.length; i++) {
			allPosts.append('<div class="single-post clearfix"><input id="checkbox" type="checkbox"><p>' + tasks[i] + '</p><a href="#" data-id="' + i + '" class="button alert delete-button">Delete</a></div>');	
		}
	}

	function deleteTask(i) {
		tasks.splice(i, 1);
		renderTasks();
	}


})(jQuery, window);