JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<div class="menu"><span id="hide">Hide</span></div>
<div class="toolbox">
    <div class="box" id="nav" style="background-color:Blue;">Navigation</div>
    <div class="box" id="sidebar" style="background-color:Red;">Sidebar</div>
    <div class="box" id="text" style="background-color:Green;">Text</div>
</div>

<div class="content">
    
</div>

CSS

.menu{ width:990px; margin: 0 auto; padding:5px; border:1px solid black; height:20px; display:none; }

.toolbox{ width:990px; margin: 0 auto; padding:5px; border:1px solid black; }

.toolbox .box { width:100px; height:100px; border:1px solid black; display:inline-block;}    

.content { width:1000px; height:500px; border:1px solid black; margin: 0 auto;}

JavaScript

$(function() {
    $(".box").click(function() {
        $(".menu").slideDown("fast");
        $(".active").removeClass("active");
        $(this).addClass("active");
    }).draggable({ containment : '.content'});

    $(".content").droppable();

    $(".menu #hide").click(function() {
        $(".menu").slideUp("fast");
    });
});