JSFiddle - React, Tailwind, and code Playground

by stevea

HTML

<div id='wrapper'>
    <div id='toolbar'></div>
    <div id='workarea'>
        <div id='box1' class='box'>box 1</div>
        <div id='box2' class='box'>box 2</div>
        <div id='box3' class='box'>box 3</div>
        <div id='box4' class='box'>box 4</div>
    </div>
</div>

CSS

body{
//    margin:0px;
    padding:0px;
    
}
}
div#wrapper {
    margin:0;
    width:600px;
    height:600px;
    border: 1px solid red;
    overflow-y: scroll;
    position: absolute;
}
div#toolbar {
    margin:0;
    padding:0px;
    width:600px;
    height:40px;
    background-color:silver;
    position: fixed;
    z-index:100;
}
div.box {
    border:1px solid black;
    background-color:beige;
    position:absolute;
    width: 100px;
    height:75px;
}
div#box1 {
    top:134px;
    left:152px;
}
div#box2 {
    top:235px;
    left:25px;
}
div#box3 {
    top:260px;
    left:280px;
}
div#box4 {
    top:370px;
    left:160px;
}

JavaScript

$(function() {
    $('.box').draggable();
});