JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/js/knockout-1.2.1.js"></script>
<script src="https://github.com/thelinuxlich/knockout_bindings/blob/master/knockout_bindings.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css">
<script type="text/x-jquery-tmp">
    

</script>

<div id="panel">

    <div id="info" class="dialog-info unit size2of10">
        <div id="entity-menu" class="entity-container" >   
          <h3><a href="#section1">Entity1</a></h3>
          <div>
               <p> Content </p>
          </div>
          <h3><a href="#section2">Entity2</a></h3>
          <div>
               <p> Content </p>
          </div>
          <h3><a href="#section3">Entity3</a></h3>
          <div>
               <p> Content </p>
          </div>
          <h3><a href="#section4">Entity4</a></h3>
          <div>
               <p> Content </p>
          </div>            
        </div>   
        
    </div>
        
    <div id="info" class="dialog-tabs unit size8of10">
         <div class="tab-container" >
           <div id="tabs">
               <ul></ul>            
         </div>
         </div>
    </div>

    </div>

CSS

@media screen and (max-width: 319px) {.unit{float: none !important; width: auto !important;}}
.line:after,.lastUnit:after,.inner:after{content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
.line{*zoom:1;}
.unit{float:left; min-height: 1px;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3,.size2of6{width:33.33333%;}
.size2of3,.size4of6{width:66.66666%;}
.size1of4{width:25%;}
.size3of4,.size6of8{width:75%;}
.size1of5, .size2of10{width:20%; height:100%}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5,.size8of10{width:80%;height:100%}
.size1of6{width:16.66666%;}
.size5of6{width:83.33333%;}
.size1of7{width:14%;}
.size2of7{width:29%;}
.size3of7{width:43%;}
.size4of7{width:57%;}
.size5of7{width:71%;}
.size6of7{width:86%;}
.size1of8{width:13%;}
.size7of8{width:87%;}
.size1of10{width:10%;}
.size3of10{width:30%;}
.size7of10{width:70%;}
.size9of10{width:90%;}
.size1of20{width:5%;}
.size19of20{width:95%;}

.inner { padding: 0.5em }

#panel {
    margin : 0 auto;    
}

.dialog-info {
}

.dialog-tabs {
 /* background-color : green;      */
}

.tab-container {
 /* padding:5px 5px 5px 5px;    */
}

.entity-container {
  padding:0px 5px 0px 0px;  
}


.flora .ui-dialog {  

}

.flora .ui-dialog-content {  
 padding: 2px 2px 2px 2px;
}

JavaScript

(function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
  // The base Class implementation (does nothing)
  this.Class = function(){};
  
  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;
    
    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;
    
    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" && 
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;
            
            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];
            
            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);        
            this._super = tmp;
            
            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }
    
    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
        if ( !initializing && this.init ) 
            this.init.apply(this, arguments);  
    }
    
    // Populate our constructed prototype object
    Class.prototype = prototype;
    
    // Enforce the constructor to be what we expect
    Class.prototype.constructor = Class;

    // And make this class extendable
    Class.extend = arguments.callee;
    
    return Class;
  };
})();

var KIVABISDomain = Class.extend({
    init : function() {     
    },
    destroy : function() {
   ...