JSFiddle - React, Tailwind, and code Playground

by caub

HTML

<script src="https://unpkg.com/dom-tagged-template@1.1.1/index.js"></script>

CSS

ul {
  list-style: none;
}
button {
  font-size: 2em;
  font-family: arial;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
}

.wat {
  display: flex;
}

JavaScript

const ul = $`<ul onClick=${e => {e.target.style.color=`hsl(${Math.floor(360*Math.random())},100%,50%)`}}>
	${['hello', 'world', 'click me'].map(x => $`<li><button>${x}</button></li>`)}
</ul>`;

document.body.append(
	$`<div>
		<u onClick=${console.log}>Hello ${'!'.repeat(4)}</u>
		${ul}
	</div>`
);

document.body.append(
	$`<div className="wat">
    <i>hello</i>
    @
    <marquee>world</marquee>
  </div>`
);