JSFiddle - React, Tailwind, and code Playground

HTML

<script>
!function(t){function e(t){var e={val:t},n=t.split(/\s+in\s+/);return n[1]&&(e.val=T(0)+n[1],n=n[0].slice(T(0).length).trim().split(/,\s*/),e.key=n[0],e.pos=n[1]),e}function n(t,e,n){var r={};return r[t.key]=e,t.pos&&(r[t.pos]=n),r}function r(t,r,i){function o(t,e,n){d.splice(t,0,e),g.splice(t,0,n)}l(t,"each");var a,f=t.outerHTML,c=t.previousSibling,p=t.parentNode,d=[],g=[];i=e(i),r.one("update",function(){p.removeChild(t)}).one("premount",function(){p.stub&&(p=r.root)}).on("update",function(){var t=A(i.val,r);if(t){if(!Array.isArray(t)){var e=JSON.stringify(t);if(e==a)return;a=e,s(g,function(t){t.unmount()}),d=[],g=[],t=Object.keys(t).map(function(e){return n(i,e,t[e])})}s(d,function(e){if(e instanceof Object){if(t.indexOf(e)>-1)return}else{var n=b(t,e),r=b(d,e);if(n.length>=r.length)return}var i=d.indexOf(e),o=g[i];return o?(o.unmount(),d.splice(i,1),g.splice(i,1),!1):void 0});var l=[].indexOf.call(p.childNodes,c)+1;s(t,function(e,c){var s=t.indexOf(e,c),v=d.indexOf(e,c);if(0>s&&(s=t.lastIndexOf(e,c)),0>v&&(v=d.lastIndexOf(e,c)),!(e instanceof Object)){var m=b(t,e),h=b(d,e);m.length>h.length&&(v=-1)}var y=p.childNodes;if(0>v){if(!a&&i.key)var w=n(i,e,s);var x=new u({tmpl:f},{before:y[l+s],parent:r,root:p,item:w||e});return x.mount(),o(s,e,x),!0}return i.pos&&g[v][i.pos]!=s&&(g[v].one("update",function(t){t[i.pos]=s}),g[v].update()),s!=v?(p.insertBefore(y[l+v],y[l+(s>v?s+1:s)]),o(s,d.splice(v,1)[0],g.splice(v,1)[0])):void 0}),d=t.slice()}})}function i(t,e,n){m(t,function(t){if(1==t.nodeType){t.parentNode&&t.parentNode.isLoop&&(t.isLoop=1),t.getAttribute("each")&&(t.isLoop=1);var r=x(t);if(r&&!t.isLoop){for(var i,o=new u(r,{root:t,parent:e},t.innerHTML),a=r.name,f=e;!x(f.root)&&f.parent;)f=f.parent;i=f.tags[a],i?(Array.isArray(i)||(f.tags[a]=[i]),f.tags[a].push(o)):f.tags[a]=o,t.innerHTML="",n.push(o)}s(t.attributes,function(n){/^(name|id)$/.test(n.name)&&(e[n.value]=t)})}})}function o(t,e,n){function i(t,e,r){if(e.indexOf(T(0))>=0){var...

JavaScript

riot.tag('form-group', [
       '<div class="form-group">',
       '  <yield/>',
       '</div>'
].join(' '), function () {});

riot.tag('labeled-field', [
    '<form-group>',
    '  <label for="{ opts.id }">',
    '    { opts.label }',
    '  </label>',
    '  <yield/>',
    '</form-group>'
].join(' '), function () {});

console.log(riot.mount('labeled-field'));