JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/WebReflection/hyperHTML/master/hyperhtml.js"></script>
<div id='app'></div>

JavaScript

function register(el, impl) {
  const renderer = hyperHTML.bind(el)
  return Object.assign({}, impl, {
    render() {
      return impl.render(renderer, hyperHTML, impl.store)
    }
  })
}

const tag = register(app, {
  get css() {
    return `
      :host {
        background: pink;
      }

      p {
        font-size: 22px;
      }
    `
  },
  store: {
    name: 'Gian',
    color: 'blue',
    items: ['uno', 'due', 'tre'],
    isChildVisible: true
  },
  // h here is an alias to hyperHTML
  render(renderer, h, store) {
    // generated flow nodes for example conditional
    const cond1 = h.wire()`
    <div>
      <p>I am a random child</p>
    </div>
    `
    const loop1 = 

    renderer`
      <div>
        <p>My name is ${ store.name }</p>${
          store.isChildVisible ? cond1 : ''
      }</div>
      <ul>${
        store.items.map(item => (
          `<li>${ item }</li>`
        ))
    	}</ul>
    `
  }
})

tag.render()

setInterval(() => {
  tag.store.items.reverse()
  tag.render()
}, 1000)