JSFiddle - React, Tailwind, and code Playground

HTML

<section class="menu_superior">
        
	<ul class="tabs" id="unidad_1_nav">
    
    <li class="selected"><a href="#tab-1">menu 1</a></li>
	<li><a href="#tab-2">menu 2</a></li>       
	<li><a href="#tab-3">menu 3</a></li>
                
	<li><a href="#">menu 4</a>
	<ul class="subs">
	<li><a href="#" >SubMenu 1</a></li>
	<li><a href="#" >SubMenu 1</a></li>
	<li><a href="#" >SubMenu 1</a></li>
	</ul>
	</li>
                
	<li><a href="#">menu 5</a>
	<ul class="subs">
	<li><a href="#tab-4" >SubBotón 1</a></li>
	<li><a href="#" >SubMenu 2</a></li>
	<li><a href="#" >SubMenu 3</a></li>
	<li><a href="#" >SubMenu 4</a></li>
	</ul>
	</li>
      
	</ul> 
	</section>
  
    <div class="pestana" id="tab-1">
	<h2>Pestaña 1</h2>
	<p>texto 1...</p>
	</div>
    
	<div class="pestana" id="tab-2">

	<div id="container_auto">
    <h2>AUTOEVALUACIÓN</h2>
	
	<p>Texto...</p>

    
	<div id="preguntas">
	<div id="dropContent">
	<div class="dragableBox_1" id="box1">Arrastar 1</div>
	<div class="dragableBox_2" id="box2">Arrastar 2</div>
	<div class="dragableBox_3" id="box3">Arrastar 3</div>
	</div> 
	</div>
    
    
    <div class="pregunta_1">
	<div class="campo_texto">

	<p>Texto 1...</p>
    </div>
    </div>
    
    
    <div class="pregunta_2">
	<div class="campo_texto">

	<p>Texto 2...</p>
    </div
    ></div>
    
    
	<div class="pregunta_3">
	<div class="campo_texto">

	<p>Texto 3...</p>
	</div>
    </div>
    
     
        
	<div id="respuestas">
	<div id="box102" class="dragableBoxRight_1"><p>Arrastre acá la respuesta</p></div>
	<div id="box103" class="dragableBoxRight_2"><p>Arrastre acá la respuesta</p></div>
	<div id="box101" class="dragableBoxRight_3"><p>Arrastre acá la respuesta</p></div>
	</div>
	</div>
    
    <input type="button" value="Volver a jugar" onClick="parent.location.reload();" style="width: 200px; height: 20px; background-color: #FDEB62; color: #543F2A; cursor: pointer; border: 0px;  margin-top: 40px; margin-left: 500px;"/>
    
	</div>
   ...

CSS

.marco_volver_home{
	width: 80px;
	float: left;
	display: inline;
	height: 35px;
}

.marco_volver_home a{
	color: #FFF;
	text-decoration: none;
	position: relative;
	float: left;
	line-height: 35px;
}

.marco_volver_home a:hover{
	color: #F00;
}

.marco_volver_home img{
	width: 25px;
	height: 25px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-top: 5px;
	margin-left: 5px;
	float: left;
	margin-right: 5px;
}

.menu_superior {
	margin-left: 240px;
	width: 710px;
	background-color: #CCC;
	position: absolute;
	top: 65px;
	border-radius: 5px 5px 5px 5px;
}

#unidad_1_nav,#nav ul {
	list-style: none outside none;
    margin: 0;
    padding: 0;
}

#unidad_1_nav {
	background-color: transparent;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
	display: table;
	position: relative;
	z-index: 9999;
	width: 710px;
}

#unidad_1_nav ul {
	background-color: #999;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	margin-top: 4px;
	border-radius: 0 0px 5px 5px;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
	position: absolute;
	overflow: hidden;
	left: -9999px;
	top: -9999px;
}

#unidad_1_nav li {
	float: left;
	position: relative;
}

#unidad_1_nav li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-decoration: none;
	color: #000;
	display: block;
	padding-top: 7px;
	padding-right: 10px;
	padding-bottom: 7px;
	padding-left: 10px;
}

#unidad_1_nav li:hover a {
	color: #FFF;
	background-color: #999;
}

#unidad_1_nav li:hover ul.subs {
	left: 0;
	top: 29px;
	width: 180px;
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	-webkit-transform: scaleY(1);
}

#unidad_1_nav ul li {
    width: 100%;
}

#unidad_1_nav ul li:hover > a {
	background-color: #666 !important;
}




/* PESTANAS */

ul.tabs{
	height:30px;
	width:100%;
	margin:0;
	padding:0;
	list-style:none
	}
	
.tabs li{
	float:left;
	}
	
.tabs...

JavaScript

/*CODIGO PARA NAVEGAR POR LAS PESTAÑAS*/
	$(document).ready(function() {
	$('.pestana').hide().eq(0).show();
	$('.tabs li').click(function(e){
	e.preventDefault();
	e.stopPropagation();
	$('.pestana').hide();
	$('.tabs li').removeClass("selected");
	var id = $(this).find("a").attr("href");
	$(id).fadeToggle();
	$(this).addClass("selected");
	});
	});



/* CODIGO PARA EL JUEGO DRAG-DROP */
function dropItems(idOfDraggedItem,targetId,x,y)
{
	var targetObj = document.getElementById(targetId);
	var subDivs = targetObj.getElementsByTagName('DIV');
	if(subDivs.length>0 && targetId!='preguntas')return;
	var sourceObj = document.getElementById(idOfDraggedItem);
	var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1;
	var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1;
	if(numericIdTarget-numericIdSource==100){
												
		sourceObj.style.backgroundColor='#0F0';
	}else{
		
		sourceObj.style.backgroundColor='#FF0000';
	}
	if(targetId=='preguntas'){
		targetObj = targetObj.getElementsByTagName('DIV')[0];	
	}
	targetObj.appendChild(sourceObj);
}



var dragDropObj = new DHTMLgoodies_dragDrop();


dragDropObj.addSource('box1',true);
dragDropObj.addSource('box2',true);
dragDropObj.addSource('box3',true);



dragDropObj.addTarget('box101','dropItems');
dragDropObj.addTarget('box102','dropItems');
dragDropObj.addTarget('box103','dropItems');


dragDropObj.addTarget('preguntas','dropItems');

dragDropObj.init();




/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/(function(e,t){var n,r,i=typeof t,o=e.document,a=e.location,s=e.jQuery,u=e.$,l={},c=[],p="1.9.1",f=c.concat,d=c.push,h=c.slice,g=c.indexOf,m=l.toString,y=l.hasOwnProperty,v=p.trim,b=function(e,t){return new...