JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="tabs" class="tabs">
<div class="tab">
Search Results
<div class="patch">
</div>
</div>
<div class="text">
< Some additional elements >
</div>
</div>
<div id="menu" class="menu">
<!-- menu elements -->
<div class="menu-element">
Job Title:
</div>
<div class="menu-element" style="width:15%">
Job Type:
</div>
<div class="menu-element" style="width:15%">
Location:
</div>
<div class="menu-element" style="width:10%;border-right:0px solid #888">
<b>Listed▼</b>
</div>
</div>
</body>
CSS
body {
background: #efe ;
font-family: "Arial", sans-serif ;
font-size: 10px ;
}
.tabs {
width: 430px ;
padding-left:5px ;
height:32.5px ; /* -- tab height + 2 * padding -- */
border: 1px dashed #eee ; /* -- for demonstration purposes only -- */
}
.tab {
z-index:0 ;
float:left ;
position:relative ;
height:22.5px ;
width:auto ;
margin-left: 1.5px ;
padding: 5px ;
border:1px solid #ccc ;
-webkit-border-radius: 7.5px ;
border-radius: 7.5px ;
-moz-border-radius: 7.5px ;
background: #eee ;
font-size:15px ;
text-align:center ;
color: #222 ;
}
.patch {
z-index:2 ;
position:absolute ;
top:22.5px ;
left:-1px ; /* -- subtracting the border -- */
height:10px ;
width:100% ;
background: rgb(238,238,238) ;
border-bottom:1px solid #eee ;
border-left: 1px solid #ccc ;
border-right: 1px solid #ccc ;
}
.menu {
width:450px ;
height:32.5px ;
background-color:#eee ;
-webkit-border-radius: 3px ;
-moz-border-radius: 3px ;
border-radius: 3px ;
border: 1px solid #ccc ;
color:#222 ;
}
.text {
float:left ;
position:relative ;
left: 25px ;
color: rgb(85,85,85)
}
.menu-element {
float: left ;
position: relative ;
width: 40% ;
height: 12.5px ;
padding: 10px ;
border-right: 1px solid #ccc ;
font-size: 12.5px ;
text-align: left ;
}