JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<div id="wrapper">
    <div id="top2">
    </div>
</div>

CSS

#wrapper {
    width: 200px;
    position: relative;
    margin-left: 200px;
}
#top1 {
    background: #000;
    width: 200px;
    height: 200px;
    float: left;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}
#top2 {
    background: red;
    width: 200px;
    height: 200px;
    float: left;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

$("#top2").click(function() {
    $("#wrapper").append("<div id='top1' />");
    $("#top2").fadeOut("slow");
});