JSFiddle - React, Tailwind, and code Playground

by understore

HTML

<script src="https://unpkg.com/[email protected]/dist/scv.min.js"></script>
<section class="todoapp">
    <header class="header">
        <h1>todos</h1>
        <div class="todo_input"></div>
    </header>
    <section class="main">
        <input class="toggle-all" type="checkbox">
        <div class="todo-list"></div>
    </section>
    <footer class="footer">
        <span class="todo-count"></span>
        <ul class="filters">
            <li>
                <a href="#/all">All</a>
            </li>
            <li>
                <a class="" href="#/active">Active</a>
            </li>
            <li>
                <a class="" href="#/completed">Completed</a>
            </li> 
        </ul><button class="clear-completed" onclick="clearTodo()">Clear completed</button>
    </footer>
</section>

CSS

html,
body {
	margin: 0;
	padding: 0;
}

button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 100%;
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

body {
	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height: 1.4em;
	background: #f5f5f5;
	color: #4d4d4d;
	min-width: 230px;
	max-width: 550px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-weight: 300;
}

button,
input[type="checkbox"] {
	outline: none;
}

.hidden {
	display: none;
}

.todoapp {
	background: #fff;
	margin: 130px 0 40px 0;
	position: relative;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.todoapp input::-webkit-input-placeholder {
	font-style: italic;
	font-weight: 300;
	color: #e6e6e6;
}

.todoapp input::-moz-placeholder {
	font-style: italic;
	font-weight: 300;
	color: #e6e6e6;
}

.todoapp input::input-placeholder {
	font-style: italic;
	font-weight: 300;
	color: #e6e6e6;
}


.active .todo-list todo_item i.checked{display:none;}
.active .todo-list todo_item i.checked+.view{display:none;}
.completed .todo-list todo_item i,
.completed .todo-list todo_item .view{display:none;}

.completed .todo-list todo_item i.checked,
.completed .todo-list todo_item i.checked + .view{display:block;}

.filters li:first-child a,
.completed .filters li:first-child+li+li a,
.active .filters li:first-child+li a{
	border-color: rgba(175, 47, 47, 0.2);
}
.completed .filters li:first-child a,
.active .filters li:first-child a,
.filters li a{border-color:#fff;}

.todoapp h1 {
	position: absolute;
	top: -155px;
	width: 100%;
	font-size: 100px;
	font-weight: 100;
	text-align: center;
	color: rgba(175, 47, 47, 0.15);
	-webkit-text-rendering:...

JavaScript

// Code goes here
var todoItemTpl = '\
                <i class="{ this.complete }" @click="checked" ></i>\
                <div class="view ">\
                    <label @keyup="submit" @dblclick="setMode" >{this.title}</label> <button @click="remove" class="destroy"></button>\
                </div>';

var todoStatusTpl = '<strong>{ this.count }</strong> item left';

var inputTpl = '<input type="text" value="{ this.title }" @keyup="write" class="new-todo" placeholder="What needs to be done?" />';

clearTodo = function(){
    var id = "todo_item";
    var todo_index = eval("["+Scv.getCookie(id)+"]");

    for(var i = 0, len = todo_index.length; i < len; i++){
        var todo_item = Scv.getItem({id : id, idx : todo_index[i]});
        if(todo_item.data.complete == "checked"){
            Scv.removeItem({id : id, idx : todo_index[i]});
        }
    }
}

var setTodo = function(option){
    if(option.event.which == 13){
        Scv.setItem({
            id :  option.id,
            idx : option.idx,
            data : {title:option.this.textContent}
        });
        option.this.removeAttribute("contenteditable");
    }else if(option.event.which == 27){
        var item = Scv.getItem({
            id :  option.id,
            idx : option.idx
        });
        option.this.textContent = item.data.title;
        option.this.removeAttribute("contenteditable");
    }	
};

var setMode = function(option){
    option.this.setAttribute("contenteditable", true);
    option.this.focus();
};

var newTodo = function(option){
    if(option.event.which == 13 && option.this.value.length > 0){

        Scv.addItem({
          id :  "todo_item",
          data : {title:option.this.value , complete : ""}
        });
        Scv.setItem({
            id : "todo_input",
            data : {title:""}
        });
    }else{
        var t = 0;
        option.event.type == "paste" ? t = 10 : "";
        setTimeout(function(){
            Scv.setItem({
                id :...