JSFiddle - React, Tailwind, and code Playground

by mjmitche

HTML

<div id="bod">
    <div class="submit">submit</div>
<div id="topnav4">
<div id="purple"></div>
<div id="yellow"></div>
<div id="lime"></div>
<div id="lightblue"></div>
<div id="red"></div>
<div id="smallwhite"></div>
    </div> <!--closes topnav4 div-->

<div id="bigbox">
<div id="greeninwhite"><p></p></div>
<div id="redinwhite"><p></p></div>
<div id="royalblue"><p></p></div>
<div id="darkblue"><p></p></div>
</div>

<div id="sidenav"></div>
<div id="intro">blahblahblah</div>

<div id="intro2">blahblahblah</div>
<div id="message">blahblahblah</div>

</div>  <!--closes bod div-->

CSS

.submit {background: #0c0c0c; width: 50px; height: 20px; position: absolute; top: 130px; color: #fff;}

bod {background: #5ca55e;  }

#purple{ background: #CF59C7; float: left; width: 25px; height: 25px; margin-left: 15px; display: none; }

 #yellow{background: #FFF491; float: left; width: 25px; height: 25px; margin-left: 15px; display: none;}

 #lime{background: #77FF5C; float: left; width: 25px; height: 25px; margin-left: 15px; display: none; }

#lightblue{background: #78F1FF; float: left; width:25px; height: 25px; margin-left: 15px; display: none;}

 #red{background: #FF5036; float: left; width: 25px; height: 25px; margin-left: 10px; display: none;}

#smallwhite{background: #0f1683; float: left; width:25px; height: 25px; margin-left: 10px; display: none;}

#intro{font-size: 16px; color: #000; position: absolute; left: 60px; top: 100px; display: none; }

 #intro2{font-size: 16px; color: #000; position: absolute; left: 60px; top: 130px; display: none;}

#message{font-size: 16px; color: #000; position: absolute; left: 60px; top: 150px; display: none;}

 #sidenav{background: #000; position: absolute; height: 100%; width: 100px;  left: 0; top: 0; display: none; }

 #bigbox{ background: #fff; position: absolute; width: 500px; height: 500px; left: 100px; top: 40px; display: none}

 #greeninwhite {background: #91FF95; width: 70px; height: 70px; position: absolute; left: 10px; top: 10px;}

#redinwhite {background: #FF584D; width: 50px; height: 50px; position: absolute; left: 100px; top: 10px;}

#royalblue {background: #6166FF; width: 50px; height: 50px; position: absolute; left: 10px; top: 200px;}

 #darkblue {background: #2A2C6E; width: 50px; height: 50px; position: absolute; left: 200px; top: 200px;}

JavaScript

$(document).ready(function(){       
$(init);   
}); 

function init() {
cloudshow();
}
function cloudshow() {
$("#intro").fadeIn(5, function(){
    $("#intro2").fadeIn(5, function(){
    $("#purple").fadeIn(5, function(){
    $("#yellow, #red").fadeIn(5, function(){
    $("#lime, #lightblue, #smallwhite").fadeIn(50, function(){
    $("#message").fadeIn(50, function() {
    $("#contactform").fadeIn(50)
    });  
    });
    
    });
    });
    });
});

};

var img1 = "url('/wp-content/themes/thesis_18/custom/images/map.jpg') repeat";

$(function() {
    $(".submit").click(function(){
$("body.custom").css({background: img1});   
$("#topnav4, #purple, #yellow, #lime, #lightblue, #red, #smallwhite, #intro, #intro2, #message, #contactform").fadeOut(1000, function (){
$("#sidenav").fadeIn(1000, function(){
        $("#topnav4").css({'background': 'none', 'display':'block'});
    $("#bigbox").fadeIn(1000, function(){
    $("#purple").css({'display':'block', 'position':'absolute','left':'20px', 'top': '10px', 'z-index': '2'});
        $("#yellow").css({'display':'block', 'position':'absolute','left':'60px', 'top': '10px', 'z-index': '2'});    
    $("#lime").css({'display':'block', 'position':'absolute','left':'90px', 'top': '10px', 'z-index': '2'});
        $("#lightblue").css({'display':'block', 'position':'absolute','left':'120px', 'top': '10px', 'z-index': '2'});


    });
    });
     }); 
    });
});


$(function(){
    $("#purple, #yellow, #lime, #lightblue").draggable();
    $("#greeninwhite, #redinwhite, #royalblue, #darkblue").droppable({
        accept: "#purple, #yellow, #lime, #lightblue",
        drop: function (event, ui) {
            $(this)
                .find ("p")
                .html("dropped");
            $("#topnav4").fadeIn(1000);
         }
             
      });
  
    
});