JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<div id="humans-wrapper">
    
</div>

CSS

.human-wrapper {font-family: Helvetica;padding:7px; border:1px #ccc solid; margin:10px;}
.human-wrapper h1 {font-size: 20px;font-weight:bold; border-bottom: 1px #ccc solid; padding-bottom:3px;margin-bottom:10px}
.human-wrapper p {font-size: 16px;}

JavaScript

window.addEvent('domready',function(){
    var humans = [
        {
             name: "Terry Worona"
            ,bio: "Canadian Developer.  Thinks he's legit."
        }
        ,{
            name: "Chase Wilson"
            ,bio: "US Developer.  Thinks he's legit as well. :("
        }
    ].map(function(human){
        return new Human(human);
    });
    
    $('humans-wrapper').set('html',humans.join(''));

})

var Template = new Class({
    _template: null
    ,setTemplate:function(str){
        this._template = str;
    }
    ,getTemplate:function(){
        return this._template || '<b>No template loaded</b>';
    }
    ,compile: function(data){
        data = data || this;
        var  head = 'var p=[],print=function(){p.push.apply(p,arguments);};'
            ,wrapper = ["with(__o){p.push(\'", "');}return p.join('');"]
            ,compiled = null
            ,inner = this._template
                      .replace(/[\r\t\n]/g, " ")
                      .split("<%").join("\t")
                      .replace(/((^|%>)[^\t]*)'/g, "$1\r")
            
                      //operators. like <%, <%=, <%-, <%?
                      .replace(/\t=(.*?)%>/g, "',escape($1),'")
                      .replace(/\t-(.*?)%>/g, "',$1,'")
                      .replace(/\t\?(.*?)%>/g, "',(typeof $1 != 'undefined')?escape($1):'','")
            
            
                      .split("\t").join("');")
                      .split("%>").join("p.push('")
                      .split("\r").join("\\'");

        try {
          compiled = new Function('__o', head + wrapper.join(inner));
        } catch(ex) {
          console.error(ex);
          throw new Error('Syntax error in template');
        }
        
        return compiled(data);
    }
});

var Human = new Class({
    Implements: [Template,Options]
    ,options: {
         name: 'No Name'
        ,bio:'No Bio'
        ,template:"<div...