JSFiddle - React, Tailwind, and code Playground

HTML

<h1>TODO</h1>
<ul id="todoList"></ul>
<template id="todoTemplate">
  <li>
    <label>
      <input type="checkbox"> <span class="text"></span>
    </label>
  </li>
</template>

CSS

#todoList {
  list-style: none;
  padding: 0;
}

JavaScript

const todos = document.querySelector('#todoList');
const template = document.querySelector('#todoTemplate');

todos.append(...[
	['Give a talk', true],
  ['Go party', false]
].map(todo => createTodo(template, todo)));

function createTodo (template, [text, done]) {
  template.content.querySelector('.text').textContent = text;
  template.content.querySelector('input').checked = done;
  return document.importNode(template.content, true);
}