JSFiddle - React, Tailwind, and code Playground

by Hushme

HTML

<div id="tocenterr">
    
   
    
   <div id="stateIN" style="display: block;">
   
   <div id="stateINborder">
   
   <div id="menucloseIN"><a onclick="Hidediv('stateIN'); " style="cursor:pointer;"><img src="../../images/cerrarr.png" width="28" height="28"></a></div>
   
   <div id="menuline1"></div>
   <div id="menuline2"></div>
   <div id="menuline3"></div>
   
  
   
    <ul id="double">
   
 
<li class="menuinAguascalientes"><a class="st" href="javascript:void(0);">Aguascalientes</a>
	<ul class="ulCityDNAguascalientes" id="menusubAguascalientes">
    		
    	<li><a href="index.php?page=location/change-city/2228&amp;01&amp;city=Aguascalientes">Aguascalientes</a></li>
        	
    	<li><a href="index.php?page=location/change-city/3610&amp;01&amp;city=Jesús María">Jesús María</a></li>
            </ul>
</li>
	

<li class="menuinMorelos"><a class="st" href="javascript:void(0);">Morelos</a>
	<ul class="ulCityDNMorelos" id="menusubMorelos">
    		
    	<li><a href="index.php?page=location/change-city/2245&amp;17&amp;city=Cuautla">Cuautla</a></li>
        	
    	<li><a href="index.php?page=location/change-city/2246&amp;17&amp;city=Cuernavaca">Cuernavaca</a></li>
        	
    	<li><a href="index.php?page=location/change-city/2264&amp;17&amp;city=Jiutepec">Jiutepec</a></li>
        	
    	<li><a href="index.php?page=location/change-city/3671&amp;17&amp;city=Temixco">Temixco</a></li>
            </ul>
</li>
	

<li class="menuinBaja California Norte"><a class="st" href="javascript:void(0);">Baja California Norte</a>
	<ul class="ulCityDNBaja California Norte" id="menusubBaja California Norte">
    		
    	<li><a href="index.php?page=location/change-city/2251&amp;02&amp;city=Ensenada">Ensenada</a></li>
        	
    	<li><a href="index.php?page=location/change-city/2276&amp;02&amp;city=Mexicali">Mexicali</a></li>
        	
    	<li><a href="index.php?page=location/change-city/2310&amp;02&amp;city=Tijuana">Tijuana</a></li>
        	
    	<li><a...

CSS

#fullcoverin a {position:absolute; z-index:90000;}

#selintro {position:absolute;
width:100%;
z-index:91000; }

#stateCity{
 float:right ;height:auto; width:710px; border:1px solid #000; margin-top:0px;position:absolute;z-index:90000; padding:15px; padding-top:5px; padding-bottom:5px; padding-right:0px; background:url(../images/blanc50p.png); background-color:#FFF; margin-left:450px; left: 16px;
	}
#stateCity ul{list-style-type:none;}
#stateCity li{  line-height:1.5em;
  border-bottom:0px solid #ccc;
  float:left;
  display:inline;}

  #stateCity { display:none; }

#double li ul li {color:#000; width:100%;}
#stateCity li ul li{ float:left; color:#0d7ad7;}
#stateIN li ul li{ float:left; color:#0d7ad7; overflow:hidden; }

#stateIN { display:none; }

#stateIN li ul li a{color: #0d7ad7;
width: 160px;
display: block;
overflow: hidden;}
#stateIN ul li a {display: block; width:140px; padding-left:15px}
#stateIN  ul  li:hover > a{ background-color:#CCC; background-image:url(../images/redarrow.png); background-repeat:no-repeat; background-position:4px 3px; padding-left:25px; }

#stateCity li ul li a{color:#0d7ad7;}

#double li  { width:50%;} <span class="code-comment">/* 2 col */</span>
#double li ul li { width:100%;} <span class="code-comment">/* 2 col */</span>


#stateCity ul li:hover{background:#CCC; width:inherit; cursor:pointer;}
#stateCity ul li ul{ float:left;list-style-type:none; display:none;position:absolute; margin-left:170px; margin-top:-25px;background-color:transparent;}
#stateCity ul li:hover > ul{ display:block; }

#stateIN{
 float:left; height:auto; width:720px; border:1px solid #4b4b4b; margin-top:190px; margin-left:-15px; z-index:90000; border-radius:0px;  background:url(../images/blanc50p.png); background-color:#fff; padding:0px;
	}
	
#stateINborder { border:10px solid #b5ddff; float:left;  padding:5px; padding-top:5px; padding-bottom:5px; padding-right:0px; }	
	
#stateIN ul{list-style-type:none; }

#tocenterr {margin:50px auto; width:710px;...