JSFiddle - React, Tailwind, and code Playground

by FANTAzeRus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/w2ui/1.4.3/w2ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/w2ui/1.4.3/w2ui.css">
<div id="test">
  <div id="layout" style="width: 100%; height: 400px;"></div>
</div>

JavaScript

$(function () {
    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
    $('#layout').w2layout({
        name: 'layout',
        panels: [
            { type: 'left', size: 200, resizable: true, style: pstyle, content: '{{ left }}' },
            { type: 'main', style: pstyle, overflow: 'hidden' }
        ]
    });
    var pstyle = 'background-color: #F0F0C1; border: 1px solid #dfdfdf; padding: 5px;';
    $().w2layout({
        name: 'layout2',
        panels: [
            { type: 'top', size: '50%', resizable: true, style: pstyle, content: '{{ top }}' },
            { type: 'main', size: '50%', resizable: true, style: pstyle, content: '{{ main }}' }
        ]
    });
    
    w2ui['layout'].content('main', w2ui['layout2']);
    
    setTimeout(function() {
      new Vue({
        el: '#test',
        data: {
          left: 'Left Div',
          top: 'Top DIV',
          main: 'Main DIV'
        }
      });
      }, 3000);
});