JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

<div id="header" class="headerdiv">
    <div id="btnBody" class="btndiv">Body
        <div class="wrapperdiv level1">
            <div class="wrappeddiv">Add...
                <div class="wrapperdiv level2">
                    <div id="addBR" class="wrappeddiv">New Line</div>
                    <div id="addText" class="wrappeddiv">Some text...
                        <div class="wrapperdiv level3">
                            <div id="txt1" class="addtxt wrappeddiv">Hi</div>
                            <div id="txt2" class="addtxt wrappeddiv">How are you</div>
                            <div id="txt3" class="addtxt wrappeddiv">I'm fine</div>
                        </div>
                    </div>
                    <div id="addPunct" class="wrappeddiv">Punctuation...
                        <div class="wrapperdiv level2">
                            <div id="addPoint" class="wrappeddiv">Point</div>
                            <div id="addQuestion" class="wrappeddiv">Questionmark</div>
                            <div id="addExclamation" class="wrappeddiv">Exclamationmark</div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="bodyReset" class="wrappeddiv">Reset</div>
            <div id="bodyRemove" class="wrappeddiv">Remove All</div>
        </div>
    </div>
    <div class="btndiv">Lesley
        <div class="wrapperdiv level1">
            <div class="wrappeddiv">Ging naar...
                <div class="wrapperdiv level2">
                    <div id="place1" class="wrappeddiv">Ieper</div>
                    <div id="place2" class="wrappeddiv">Kontich</div>
                    <div id="place3" class="wrappeddiv">Zonnebeke</div>
                    <div id="place4" class="wrappeddiv">Kortrijk</div>
                </div>
            </div>
        </div>
    </div>
    <div class="btndiv">Anthony
        <div class="wrapperdiv level1">
            <div class="wrappeddiv">Komt naar...
...

CSS

html, body, div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body {
    min-height: 100%;
}
.headerdiv {
    height: 45px;
    color: white;
    font-size: 18px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #555555;
}
.btndiv {
    display: inline-block;
    padding: 12px;
    -webkit-user-select: none;
}
.wrapperdiv {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 45px;
    left: 0px;
    z-index: 1;
}
.wrappeddiv {
    display: block;
    font-size: 15px;
    white-space: nowrap;
    padding: 5px 12px 5px 12px;
    background: #555555;
}
.bodydiv {
    min-height: 200px;
    padding: 12px;
    font-size: 16px;
    background: white;
}
.persoon {
    position: absolute;
    width: 20px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    font-size: 15px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #930000;
    color: white;
    opacity: 0.5;
}
#anthony {
    top: 160px;
    left: 60px;
}
#lesley {
    top: 120px;
    left: 250px;
}
.footerdiv {
    height: 45px;
    width: 100%;
    padding: 12px;
    position: absolute;
    bottom: 0px;
    font-size: 12px;
    background: #555555;
}

JavaScript

var bodyHtml = $("#body").html();
var hCI = "#555555"; //hC stands for headerColor
var hCS = "#222222";
var hCC = "#444444";
var bCIdle = "white"; //bC stands for bodyColor
var fCIdle = "#555555"; //fC stands for footerColor
$(document).ready(function () {
    $(".btndiv").mouseenter(function () {
        $(this).css("background-color", hCS);
        $(this).children().children().andSelf().css("background-color", hCI);
        $(this).children().css("left", $(this).position().left + "px");
        $(this).children().css("top", $(this).parent().position().top + $(this).parent().height() + "px");
        $(this).children().children().children("span").andSelf().css("visibility", "visible");
        var wrapheight = $(this).children().height();
        $(this).children().css("height", "0px");
        $(this).children().animate({
            "height": wrapheight
        }, 150);
    });
    $(".btndiv").mouseleave(function () {
        $(this).css("background-color", hCI);
        $(this).children().children().children("span").andSelf().css("visibility", "hidden");
    });
    $(".btndiv").mousedown(function () {
        $(this).css("background-color", hCC);
    });
    $(".btndiv").mouseup(function () {
        $(this).css("background-color", hCS);
    });

    $(".wrappeddiv").mouseenter(function () {
        $(this).css("background-color", hCS);
        $(this).children("div").children().andSelf().css("background-color", hCI);
        var mostrightpx = $(this).parent().offset().left + $(this).parent().width() + $(this).children().width();
        if ($("body").width() > mostrightpx) {
            $(this).children("div").css("left", $(this).parent().width() + "px");
        } else {
            $(this).children("div").css("left", -$(this).children().width() + "px");
        }
        $(this).children("div").css("top", $(this).position().top + "px");
        $(this).children("div").children().children("span").andSelf().css("visibility", "visible");
        var...