JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="wrapper">
	
    <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 93.7 93.7" 		enable-background="new 0 0 93.7 93.7" xml:space="preserve">
<g>
	<g>
		<g><path d="M59.4,28.2h5.2v37.4H29.1V28.2h4.6l0.2,3h-1.8v31.4h29.5V31.2h-2.3L59.4,28.2z"/></g>
		<g><rect x="36.7" y="64.1" width="3" height="27.6"/></g>
		<g><rect x="42.9" y="64.1" width="3" height="28.1"/></g>
		<g><rect x="47.9" y="64.1" width="3" height="28.2"/></g>
		<g><rect x="54.1" y="64.1" width="3" height="27.7"/></g>
		<g><rect x="41.3" y="75.4" transform="matrix(0.4328 0.9015 -0.9015 0.4328 100.8492 -6.4389)" width="28.5" height="3"/></g>
		<g><rect x="47.9" y="74.7" transform="matrix(0.4328 0.9015 -0.9015 0.4328 103.533 -12.1013)" width="26.9" height="3"/></g>
		<g><rect x="36.7" y="62.7" transform="matrix(0.9014 0.433 -0.433 0.9014 37.0712 -8.9558)" width="3" height="28.5"/></g>
		<g><rect x="30.9" y="62.8" transform="matrix(0.9014 0.433 -0.433 0.9014 36.1955 -6.4933)" width="3" height="26.9"/></g>
		<g><rect x="2.3" y="34.7" width="28.3" height="3"/></g>
		<g><rect x="1.8" y="40.9" width="28.8" height="3"/></g>
		<g><rect x="3.3" y="34.7" transform="matrix(0.9015 0.4328 -0.4328 0.9015 17.4053 -4.0907)" width="28.7" height="3"/></g>
		<g><rect x="5" y="28.9" transform="matrix(0.9015 0.4328 -0.4328 0.9015 14.9694 -4.9976)" width="27" height="3"/></g>
		<g><rect x="63.1" y="34.7" width="28.3" height="3"/></g>
		<g><rect x="63.1" y="40.9" width="28.9" height="3"/></g>
		<g><rect x="74.6" y="21.8" transform="matrix(0.433 0.9014 -0.9014 0.433 75.7489 -48.0457)" width="3" height="28.7"/></g>
		<g><rect x="73.8" y="16.9" transform="matrix(0.433 0.9014 -0.9014 0.433 70.0757 -50.6283)" width="3" height="27"/></g>
		<g><path d="M46.9,93.7C21,93.7,0,72.7,0,46.9S21,0,46.9,0c25.8,0,46.9,21,46.9,46.9S72.7,93.7,46.9,93.7z...

CSS

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
}

#wrapper {
	width: 100%;
	height: 100%;
	margin: 0;
}

#logo {
	position: absolute;
	left: 50%;
	margin-left: -100px;
	top: 50%;
	margin-top: -100px;
	z-index: 10;
	
	width: 200px;
	height: 200px;
	fill: black;
}

#circle1 {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	background: #cbefe8;
	/*border: #cbefe8 10px solid;*/
	border-radius: 200px;
	box-sizing: border-box;
	display: none;
}

#circle2 {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	background: #FF9;
	/*border: #FF9 10px solid;*/
	border-radius: 200px;
	box-sizing: border-box;
	display: none;
}

#circle3 {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	background: #F69;
	/*border: #F69 10px solid;*/
	border-radius: 200px;
	box-sizing: border-box;
	display: none;
}

#circle4 {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	background: #9F9;
	/*border: #9F9 10px solid;*/
	border-radius: 200px;
	box-sizing: border-box;
	display: none;
}

#content {
	display: none;
}

.contentBorder {
	position: fixed;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 80%;
	height: 80%;
	
	border: 10px solid;
	border-color: black;
	z-index: 100;
}

.cross { 
	position: fixed;
	top: 10px;
	left: 10px;
}

.contentText {
	margin: 300px 50px auto 50px;
	text-align: justify;
	text-justify: distribute;
}

JavaScript

$("#circle1, #circle2, #circle3, #circle4").draggable();

$( "#logo" ).droppable({
  tolerance: "touch",
  drop: function(event, ui) {
			  $(ui.draggable).animate({top: "50%"}, {duration: "slow", queue: false})
				 .animate({left: "50%"}, {duration: "slow", queue: false})
				 .animate({margin: "-50px 0 0 -50px",}, {duration: "slow", queue: false});
			  
			  if ( $(ui.draggable).hasClass("c1") ) {
				  setTimeout( function(){
						$('.contentBorder').css('border-color', '#cbefe8');
						$('#content').show("slow");
						$('#circle1, #circle2, #circle3, #circle4').hide("fast");
						$("#logo").animate({marginTop: "-=100px",}, {duration: "slow", queue: false})
						centre();
					}  , 500 );
			  } else if ( $(ui.draggable).hasClass("c2") ) {
				  setTimeout( function(){
						$('.contentBorder').css('border-color', '#FF9');
						$('#content').show("slow");
						$('#circle1, #circle2, #circle3, #circle4').hide("fast");
						$("#logo").animate({marginTop: "-=100px",}, {duration: "slow", queue: false})
						centre();
					}  , 500 );
			  } else if ( $(ui.draggable).hasClass("c3") ) {
				  setTimeout( function(){
						$('.contentBorder').css('border-color', '#F69');
						$('#content').show("slow");
						$('#circle1, #circle2, #circle3, #circle4').hide("fast");
						$("#logo").animate({marginTop: "-=100px",}, {duration: "slow", queue: false})
						centre();
					}  , 500 );
			  } else if ( $(ui.draggable).hasClass("c4") ) {
				  setTimeout( function(){
						$('.contentBorder').css('border-color', '#9F9');
						$('#content').show("slow");
						$('#circle1, #circle2, #circle3, #circle4').hide("fast");
						$("#logo").animate({marginTop: "-=100px",}, {duration: "slow", queue: false})
						centre();
					}  , 500 );
			  }
  		}
});	

$("#logo").click(function(){
	$(this).css("z-index","-1");
	$('#circle1, #circle2, #circle3, #circle4').show("slow");
	setTimeout( function(){
		randomize();
	}  , 500...