JSFiddle - React, Tailwind, and code Playground

by brigand

CSS

.main {
  margin: 2em;
  box-shadow: 0 0 3px #999;
}

.red {
  color: red;
}

JavaScript

function h(tag, props, ...children) {
	const element = Object.assign(document.createElement(tag), props);
  for (const child of children) {
  	if (!child || child === true) {
			continue;
    }
    

  	if (child instanceof Node) {
      element.appendChild(child);
    } else {
      const text = document.createTextNode(String(child));
      element.appendChild(text);
    }
  }
  
  return element;
}

const root = h('div', { className: 'main'},
	h('h2', {}, 'Header'),
  h('p', { className: 'red' }, 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.')
);

document.body.appendChild(root);