JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<script src="https://cdn.tailwindcss.com"></script>

JavaScript

import { html, render } from "https://unpkg.com/htm/preact/standalone.module.js";

function App() {
	const habits = [
  	"Make a plan",
    "Friends",
    "Exercise",
    "Shower",
    "Eat veggies",
    "Rocket Spelling",
    "Clown School"
  ];

	return html`
  	<table>
    	<thead>
      	<tr>
        	${habits.map(habit => html`
          	<th>${habit}</th>
          `)}
        </tr>
      </thead>
      <tbody>
      	<tr>
        	${habits.map(habit => html`
          	<td><input type="checkbox" /></td>
          `)}
        </tr>
      </tbody>
    </table>
  `;
}

render(html`<${App} />`, document.body);