JSFiddle - React, Tailwind, and code Playground
HTML
<body id="container">
<div id="menu_bars">
<div id="main_bar">
<ul>
<li id="overview_tab" class="maintabs"><a id="text_overview_tab">Overview</a></li><li id="collar_tab" class="maintabs"><a id="text_collar_tab">Collar/ Neckline</a></li><li class="maintabs" id="body_tab"><a id="text_body_tab" >Body</a></li><li id="sleeves_tab" class="maintabs"><a id="text_sleeves_tab" >Sleeves</a></li>
</ul>
</div>
</div>
</body>
CSS
html {
height: 100%;
}
body#container {
position: relative;
width: 100%
min-width: 1280px;
height: 100%;
min-height: 700px;
background-color: rgba(255,255,255,0.8);
margin: 0 auto;
/* overflow: hidden;*/
}
#menu_bars {
position: relative;
width: 90%;
height: 40%;
margin: 0 auto;
}
#main_bar {
float: left;
width: 78%;
height: 100%;
}
#main_bar ul {
float: left;
width: 100%;
height: 100%;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; /* Opera & IE9 donot have prefixes, directly support border-radius */
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Opera & IE9 donot have prefixes, directly support box-shadow */
}
.maintabs {
display: inline-block;
width: 25%;
height: 100%;
list-style-type: none;
cursor: pointer;
background: rgb(237,237,237); /* Old browsers */
background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(237,237,237) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(237,237,237))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(237,237,237) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(237,237,237) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(237,237,237) 100%); /* IE10+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(237,237,237)...