JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="https://angularlight.org/bin/alight_0.14.last.min.js"></script>
<parent content="child" />

CSS

parent {
  border: 1px solid blue;
  padding: 4px;
  display: inline-block;
}
box {
  border: 1px dotted red;
  padding: 4px;
  display: inline-block;
}

Babel + JSX

alight.component('parent', function(vm, el) {
	let childComponent = el.attributes.content.value;
	return {
  	template: `Parent component<box>
    		<${childComponent} />
      </box>`
  }
});

alight.component('child', function() {
	return {template: '<b>Child component</b>'}
});

alight('body');