JSFiddle - React, Tailwind, and code Playground

by Adam Boduch

HTML

<header id="top-panel">
        
    </header>
    <aside id="left-panel">
        <div id="accordion">
            <h3>Layouts</h3>
            <div class="controls">
                <div ><img src="images/builder/" title=""> FrameLayout</div>
                <div><img src="images/builder/" title=""> LinearLayout</div>
                <div><img src="images/builder/" title=""> TableLayout</div>
                <div><img src="images/builder/" title=""> GridLayout</div>
                <div><img src="images/builder/" title=""> RelativeLayout</div>
            </div>
            <h3>Widgets</h3>
            <div class="controls">
                <div><img src="images/builder/" title="">TextView</div>
                <div><img src="images/builder/" title="">Button</div>
                <div><img src="images/builder/" title="">RadioButton</div>
                <div><img src="images/builder/" title="">CheckBox</div>
                <div><img src="images/builder/" title="">Switch</div>
                <div><img src="images/builder/" title="">ToggleButton</div>
                <div><img src="images/builder/" title="">ImageButton</div>
                <div><img src="images/builder/" title="">ImageView</div>
                <div><img src="images/builder/" title="">ProgressBar</div>
                <div><img src="images/builder/" title="">SeekBar</div>
                <div><img src="images/builder/" title="">RatingBar</div>
                <div><img src="images/builder/" title="">Spinner</div>
                <div><img src="images/builder/" title="">WebView</div>
            </div>
            <h3>Text Fields</h3>
            <div class="controls">
                <div><img src="images/builder/" title="">PlainText</div>
                <div><img src="images/builder/" title="">Password</div>
                <div><img src="images/builder/" title="">E-mail</div>
                <div><img src="images/builder/" title="">Multiline text </div>
                <div><img...

CSS

article, aside, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
#top-panel {
    background-color: #ccccff;
    z-index: 1;
    height: 70px;
    width: 100%;
    position:fixed;
    left:0px;
    top:0px;
    right:0px;
}
#left-panel {
    margin-top: 70px;
    background-color: #cccccc;
    z-index: 1;
    height: 100%;
    width: 200px;
    position:fixed;
    left:0px;
    top:0px;
    bottom:0px;
}
#right-panel {
    margin-top: 70px;
    background-color: #cccccc;
    z-index: 0;
    height: 100%;
    width: 200px;
    position:fixed;
    right:0px;
    top:0px;
    bottom:0px;
}
#center-panel {
    background-color: #ffffcc;
    z-index: 0;
    height: 110%;
    width:70%;
    position:fixed;
    margin-left:200px;
    top:50px;
    right:202px;
    bottom:0px;
    border: gray dashed medium;
}

JavaScript

$(document).ready(function () {
    //$(function() {
    $("#accordion").accordion({
        heightStyle: "fill"
    });
    $("#left-panel #accordion .controls div").draggable({
        appendTo: "#center-panel #droppable",
        helper: "clone",
        revert: "valid"
    });
    $("#center-panel #droppable").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function (event, ui) {

            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("Dropped!");
        }
    });
    //});
});