JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="header">Task list</h1>

<div class="container" id="tasks"></div>
<div class="options">
    <form id="mainForm">
        <input type="text" value="" class="task" id="input" />
        <button type="button" id="addButton" class="addTask">Add</button>
        <button type="button" id="deleteButton" class="deleteTask">Delete</button>
    </form>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font: 16px/100%'Arial';
    padding: 50px 0;
    background: lightgrey;
}
ul {
    list-style: none;
}
li {
    padding: 5px 0;
}
h1, h2, ul, div, p {
    padding: 15px;
}
h1 {
    background: #6699FF;
}
h2 {
    background: #66CCFF;
}
input {
    margin-right: 5px;
}
.container {
    background: cornflowerblue;
}
.options {
    background: lighgrey;
}

JavaScript

var tasksApp = (function () {
    'use strict';

    var tasks = ['My birthdays', 'Take a pill', 'Eat something'],
        $header = document.getElementById('header'),
        $tasks = document.getElementById('tasks'),
        $input = document.getElementById('input'),
        $addButton = document.getElementById('addButton'),
        $deleteButton = document.getElementById('deleteButton');

    function fillTemplate(s) {
        //Replace ~ with further provided arguments  
        for (var i = 1, a = s.split('~'), s = ''; i < arguments.length; i++)
        s = s + a.shift() + arguments[i];
        return s + a.join("");
    }

    var model = {
        add: function (task) {
            tasks.push(task);
        },
        delete: function (index) {
            if (index > -1) {
                tasks.splice(index, 1);
            }
        },
        getTasks: function () {
            return tasks || [];
        },
        taskPrefix: 'task_'
    };

    var ui = {
        update: function (model) {
            var tasks = model.getTasks(),
                title = 'Task list (' + tasks.length + ')',
                html = '';
            $header.innerText = title;
            for (var i = 0; i < tasks.length; i++) {
                html += fillTemplate('<li><input type="checkbox" id="task_~">~</li>', i, tasks[i]);
            }
            //Using innerHTML might be a bit controversial, but oh so convenient
            $tasks.innerHTML = '<ul>' + html + '</ul>'
        }
    };
    //The controller does the initialization, button event binding and handles events
    var controller = {
        initialize: function () {
            ui.update(model);
            $addButton.addEventListener('click', controller.add);
            $deleteButton.addEventListener('click', controller.delete);
        },
        add: function (e) {
            model.add($input.value);
            ui.update(model);
        },
        delete: function (e) {
            var checkboxes =...