JSFiddle - React, Tailwind, and code Playground

by Bianca Kuehweidner

HTML

<div id="nav">
    <div id="nav_1">1</div>
    <div id="nav_2">2</div>
    <div id="nav_3">3</div>
</div>
<ul class="tabrow">
    <li id="tabBookingManager" class="selected"><a href="#" title="Booking Manager">Booking Manager</a></li>
    <li id="tabFareQuery" title="Fare Query"><a href="#">Fare Query</a></li>
    <li id="tabAvailableFareQuery" class="last-child"><a href="#" title="Available Fares Query">Available Fares Query</a></li>
    </ul>

   <div id="overlay_mask"></div>

CSS

#nav_1, #nav_2, #nav_3 { 
    display: inline-block; 
    position: relative; 
    width: 50px; 
    height: 50px; 
    background-color: #ff77ee;
    border: solid 1px #000;
    margin-right: -10px;  
}
#nav_1 { z-index: 5; background-color: #f00; }

.tabrow {
    text-align: left;
    list-style: none;
    overflow: hidden;
    font-size: 12px;
    font-family: verdana;
    position: relative;
    width: auto;
}
.tabrow li {
    float: left;
    width: auto; 
    padding: 5px 10px;
    background-color: #ff77ee;
    border: solid 1px #000;
    z-index: 0;
    margin-left: -20px;
}
.tabrow li:first-child { z-index: 5; background-color: #f00; margin-left: 0; }

#overlay_mask { background-color: #aaa; opacity: 0.8; position: fixed; z-index: 10; top: 0; left: 0; height: 100%; width: 100%; }