JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<div class="container">
<div class="set"></div>
<div class="chooseLogo" >
		<ul>
			<li><a href="#tab-1">Tab </a></li>
			<li><a href="#tab-2">Tab</a></li>
			<li><a href="#tab-3">Tab</a></li>
		</ul>
</div>
<div class="mainContent">

</div>
</div>

CSS

*{padding:0px;
margin:0px;}
.container{
width:650;
height:371;
position:relative;
margin-top:20px;
margin-left:20px;
}
.set{
width:40px;
height:200px;
box-shadow: 0 0 2px #999;
position:absolute;
}
.chooseLogo{
width:649px;
height:200px;
 border-radius: 4px;
 
box-shadow: 0 0 5px #999;
position: absolute;

}
.chooseLogo li{
  list-style: none outside none;
list-style: none;
margin-top:40px;
padding-left:10px;
padding:0;

}
.chooseLogo a{
	background: none repeat scroll 0 0 #fff;
	border-radius: 0 3px 3px 0;
    border-right: 1px solid #999;
    box-shadow: -1px 0 2px #777;
    padding: 2px 20px 1px;
    position: relative;
    text-decoration: none;
	z-index:200;
}
.mainContent{
width:610px;
height:371px;
border-radius: 0px 4px 4px 4px;
box-shadow: 0 0 5px #999;
position: absolute;
left:40px;
background-color:white;
z-index:100;
}