JSFiddle - React, Tailwind, and code Playground

by jonathanwest

HTML

<div id="container">
    <div id="box1" class="widget-container">
        <div class="widget">
            <div class="widget-content">
                Item 1
            </div>
        </div>
        <div class="widget">
            <div class="widget-content">
                Item 2
            </div>
        </div>
    </div>
    <div id="box2" class="widget-container">
        <div class="widget">
            <div class="widget-content">
                Item 3
            </div>
        </div>
    </div>
    <div id="box3" class="widget-container">
        <div class="widget">
            <div class="widget-content">
                Item 4
            </div>
        </div>
        <div class="widget">
            <div class="widget-content">
                Item 5
            </div>
        </div>
    </div>
</div>

CSS

html, body {
            height:                 100%;
            margin:                 0;
        }
        body {
            position:               absolute;
            height:                 auto;
            top:                    0;
            left:                   0;
            bottom:                 0;
            right:                  0;
            padding:                0;
            margin:                 5px 5px 5px 5px;
        }
        #container {
            height:                 100%;
            width:                  100%;
            background-color:       #FFFFFF;
            border-radius:          5px 5px 0 0;
            display:                -webkit-box;
            display:                -moz-box;
            display:                box;
            -webkit-box-orient:     horizontal;
            -moz-box-orient:        horizontal;
            box-orient:             horizontal;
            -webkit-box-pack:       justify;
            -moz-box-pack:          justify;
            box-pack:               justify;
            -webkit-box-align:      stretch;
            -moz-box-align:         stretch;
            box-align:              stretch;
        }
        #box1, #box2, #box3 {
            margin:                 5px;
            padding:                2px;
            display:                -webkit-box;
            display:                -moz-box;
            display:                box;
            -webkit-box-orient:     vertical;
            -moz-box-orient:        vertical;
            box-orient:             vertical;
            -webkit-box-pack:       start;
            -moz-box-pack:          start;
            box-pack:               start;
            -webkit-box-flex:       1;
            -moz-box-flex:          1;
            box-flex:               1;
        }
        div.widget
        {
            padding:                        2px;
            -moz-border-radius:             4px 4px 0...

JavaScript

$("#box1, #box2, #box3").resizable({
        handle: "e",
        cancel: "cancel"
    });