JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id = 'wrapper'>
        <div id = 'tool_window'>
            <div id = 'select' class = 'ini_button'>
            Select
            </div>
            <div id = 'move' class = 'ini_button'>
            Move
            </div>
            <div id = 'resize' class = 'ini_button'>
            Resize
            </div>
            <div id = 'shape' class = 'ini_button'>
            Add Shape
            </div>
                <div id = 'icon_holder'>
                    <form>
                    <input id = 'draw_rect' type = 'button' value = 'Rectangle' />
                    <input id = 'draw_circ' type = 'button' value = 'Circle'/>
                    </form>
                </div>
                <div id = 'shape_info'>
                    <form>
                        <div id = 'rect_height'><div  style = 'float:left'>Height:</div><input id = 'rect_height_input' name = 'heightrect' type = 'text' size = '2'/></div>
                        <div><div id = 'rect_width'  style = 'float:left'>Width:</div><input id = 'widthorradius' name = 'widthSradius' type = 'text' size = '2'/></div>
                        Color: 
                        <select id = 'color_list' name = 'colorlist'>
                            <option value = 'black'>Black</option>
                            <option value = 'red'>Red</option>
                            <option value = 'blue'>Blue</option>
                            <option value = 'green'>Green</option>
                            <option value = 'yellow'>Yellow</option>
                        </select>
                        <input id = 'add_shape' type = 'button' value = 'Add!' />
                    </form>
                </div>
            <div id = 'image' class = 'ini_button'>
            Add Image
            </div>
                <div id = 'img_add' class = 'dropdown'>
                <form>
                    <input id = 'img_loc' type = 'text' /><br /><br />
                    <input id =...

CSS

body {
    margin:0px;
    padding:0px;
    background-image:url('stripe_bg.png');
}
    #wrapper {
        margin:0px;
        padding:0px;
            padding-left:100px;
        height:100%;
    }
    .dropdown {
        margin:0px;
        padding:0px;
        opacity:0.0;
        z-index:9;
    }
    #img_add {
        margin:0px;
        padding:0px;
        position:absolute;
        top:394px;
        left:321px;
        opacity:0.0;
        z-index:9;
    }
    .newBox {
        margin:0px;
        padding:0px;
        border:1px dashed red;
        position:absolute;
    }
    #add_btn {
        margin-left:25px;
    }
        #tool_window {
            margin:0px;
            padding:0px;
            height:600px;
            width:1406px;
            position:absolute;
            top:111px;
            left:0px;
            overflow:hidden;
        }
            #begin {
                padding-left:86px;
                height:60px;
                width:200px;
                top:516px;
                left:756px;
                font-size:42px;
            }
            #snd_btn_container {
                margin:0px;
                padding:0px;
                position:absolute;
                top:5px;
                left:58px;
                width:400px;
                z-indez:14;
                opacity:0.0;
                visibility:hidden;
            }
                #save{
                    padding-left:44px;
                    height:50px;
                    width:122px;
                    top:516px;
                    left:574px;
                    font-size:30px;
                    z-index:14;
                }
                #load{
                    padding-left:44px;
                    height:50px;
                    width:122px;
                    top:516px;
                    left:756px;
                    font-size:30px;
                    z-index:14;
                }
                #reload{
               ...

JavaScript

$(document).ready(function() {
    
    var increment = 0;
    
    {/*make add shape tool
        
        make elements within select box collectively draggable
        
        learn .NET serialization*/}
    
    $('#begin').click(function() {
        {//Opens canvas for work
            $('#work_area').toggleClass('ini_work_area work_area');
                $('#work_area').addClass('dropSpace');
            $('#select').toggleClass('ini_button button');
            $('#move').toggleClass('ini_button button');
            $('#resize').toggleClass('ini_button button');
            $('#shape').toggleClass('ini_button button');
            $('#image').toggleClass('ini_button button');
            $('#clear').toggleClass('ini_clear clear');
            $('#trash').toggleClass('ini_trash trash');
                $('#trash').addClass('trashSpace');
        }
        
        {//Initialize Drop and Trash Spaces
            //.dropSpace is initialized, .trashSpace is drop-animated
            $('.dropSpace').droppable({
                accept:'.canDrag',
                drop:function() {
                    $('.trashSpace').animate({
                        opacity:'0.1'
                    },500);
                }
            });
            //.trashSpace is initialized, bubbling is halted, activate(drag), over, drop, and out functions are set
            $('.trashSpace').droppable({
                tolerance:'pointer',
                greedy:true,
                activate:function() {
                    $('.trashSpace').animate({
                        opacity:'0.3'
                    },500);
                },
                over:function() {
                    $('.trashSpace').queue('fx',function() {
                        $(this).css({
                            backgroundColor:'#ff0000',
                            color:'black'
                        });
                        $(this).dequeue('fx');
                    });
                   ...