JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/ken107/databind-js/master/databind.js"></script>
<h3>TODO</h3>
<div bind-repeater-i="#todos.length"
	bind-statement-1="thisElem.style.display = (#todos[#i].done && #hideInactive ? 'none' : '')"
	bind-statement-2="thisElem.className = (#i%2==0 ? 'even-row' : 'odd-row')">
	<input type="checkbox"
        bind-statement-1="thisElem.checked = #todos[#i].done"
        bind-event-change="#todos[#i].done = thisElem.checked" />
    <span bind-statement-1="thisElem.style.textDecoration = (#todos[#i].done ? 'line-through' : '')">
	    {{#todos[#i].text}}</span>
	<div class="delete-button"
        bind-event-click="#todos.splice(#i,1)">x</div>
</div>
<div style="margin-top: 20px;">
    <input type="button"
        bind-event-click="#hideInactive = !#hideInactive"
        bind-statement-1="thisElem.value = (#hideInactive ? 'Show inactive' : 'Hide inactive')" />
</div>

CSS

.even-row {
    background: #eee
}
.delete-button {
    cursor: pointer;
    float: right;
}

JavaScript

todos = [
	{text: "Groceries", done: true},
	{text: "Pick up mom from airport"},
	{text: "Pay credit card bill"}
];
hideInactive = false;