JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header-main">
    	<div class="top">
        	<div class="Language-main">
            	<ul class="language">
                	<li>
                    	<div class="main-lang"> 	
                                <div class="lang-left">
                                   <a href="#">Language:</a>
                                 </div>
                                 <div class="lang-right">
                                    <a id="list1" href="#">English</a>
                                 <div class="varlang-main">
                                   <ul class="varlang">
                                       <li><a href="#">English</a></li>
                                       <li><a href="#">French</a></li>
                                       <li><a href="#">German</a></li>
                                    </ul>
                               	  </div>
                               </div>
                           </div>
                  	  </li>
                      <li>
                      	<div class="main-cur"> 	
                                <div class="cur-left">
                                   <a href="#">Currency :</a>
                                 </div>
                                 <div class="cur-right">
                                    <a id="list2" href="#">USD</a>
                                 <div class="varcur-main">
                                   <ul class="varcur">
                                       <li><a href="#">USD</a></li>
                                       <li><a href="#">VND</a></li>
                                       <li><a href="#">EURO</a></li>
                                    </ul>
                               	  </div>
                               </div>
                           </div>
                      </li>
                </ul>
            </div>
        </div>

CSS

.header-main{
	height:140px;
	width:100%;
}

.top{
	font-size:12px;
	width:100%;
	height:35px;
	position:relative;
	background-image: -webkit-linear-gradient(#FFFFFF, #dde6de);
	background-image: -moz-linear-gradient(top, #FFFFFF, #dde6de);
	background-image: -ms-linear-gradient(#FFFFFF, #dde6de);
	background-image: -o-linear-gradient(#FFFFFF, #dde6de);
	background-image: linear-gradient(#FFFFFF, #dde6de);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#dde6de', GradientType=0);
}
.Language-main{
	position:relative;
	margin-left:115px;
	float:left;
}
span{
	color:#ff558e;
}
.header-main a{
	text-decoration:none;
	color:#626364;
}
.language{
	height:35px;
}
.language li{
	list-style:none;
	display:block;
	float:left;
}
.main-lang{

}
.main-lang a{
	display:block;
	margin-top:10px;
}
.lang-left{
	width:60px;
	height:35px;
	float:left;
}
.lang-right{
	width:54px;
	height:35px;
	float:left;
	padding-right:10px;
	z-index:200;
	position:relative;
	padding-left:1px;
}
.lang-right:hover{
	background:#fff;
	border-left:#b7b7b7 solid 1px;
	border-right:#b7b7b7 solid 1px;
	padding-right:9px;
	padding-left:0px;
}
#list1{
	color:#f692b2;
	padding-right:20px;
	background:url(image/arrow.png) no-repeat right;
	position:relative;
	z-index:300;
	padding-left:3px;
	width:40px;
	background-position:46px 6px;
}
.lang-right:hover #list1{
	padding-bottom:9px;
	border-bottom:#fff solid 3px;
	position:relative;
	display:block;
}
.varlang-main{
	display:none;
	width:60px;
	background:#fff;
	position:relative;
	top:-2px;
	left:-1px;
	padding:0 30px 0 10px;
	border:#b7b7b7 solid 1px;
	z-index:99;
	height:90px;
}
.varlang{
	list-style:none;
}
.varlang li{
	display:block;
	padding-left:20px;
	margin-bottom:5px;
}
.varlang a{
	background:#fff;
}
.varlang li:nth-child(1) {
	background:url(image/english.jpg) no-repeat left;
}
.varlang li:nth-child(2) {
	background:url(image/french.jpg) no-repeat left;
}
.varlang li:nth-child(3)...