JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

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

JavaScript

/**
 * Riot.js is loaded from External Resources
 * https://cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)
 */
riot.mount('*', {
    elements:  [{
        foo: 'foo',
        id: 0
    },{
        foo: 'bar',
        id: 1
    }],
});