JSFiddle - React, Tailwind, and code Playground

by Kris Zyp

HTML

<script src="https://rawgit.com/kriszyp/alkali/master/dist/index.js"></script>
<div id='target'></div>

CSS

.header {
  border-left: 2px solid #aaa;
  padding-left: 5px;
  cursor: pointer;
}
.header.expanded {
  border-left: none;
}

JavaScript

let { Div, A, H1, P, Variable } = alkali;
let expanded = new Variable(true);
let info = new Div([
	H1('.header', 'Alkali', {
  	classes: {
    	expanded: expanded
    },
    onclick() {
    	// toggle the expansion
    	expanded.put(!expanded.valueOf());
    }
  }),
  Div({
		display: expanded
  }, [
    A('.link', {
      href: 'https://kriszyp.github.com/alkali',
      content: 'Visit Site'
    }),
    P('Lightweight, fast reactivity')
  ])
]);
document.getElementById('target').appendChild(info);