JSFiddle - React, Tailwind, and code Playground

by _jro

HTML

<div class="w">
    <nav id="bar">
        <ul>
            <li>
                <a href="#" class="selected">Startups</a>
                
            </li>
                <div class="subnav">
                    <h3>Here is some dummy content</h3>
                </div>                
            <li><a href="#">Internet Culture</a></li>
            <li><a href="#">Making Money</a></li>
            <li><a href="#">Marketing</a></li>
            <li><a href="#">Technology</a></li>
        </ul>
    </nav>
</div>

CSS

html { font-family: Arial, Tahoma, sans-serif; color: #444; }
#bar { display: block;  height: 45px; background: #22385a; padding-top: 5px; margin-bottom: 150px; position: relative; }
#bar ul { margin: 0px 15px; font-family: Calibri, "Segoe UI", Segoe, Arial, sans-serif; }
#bar ul li {  background: #22385a; display: block; font-size: 1.0em; position: relative; float: left; }
#bar ul li a { 
display: block; 
color: #fffff7; 
line-height: 45px; 
font-weight: bold; 
padding: 0px 10px; 
text-decoration: none;
z-index: 9999;
}

#bar ul li a:hover, #bar ul li a.selected {
color: #365977;
background: #fff;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}

#bar ul .subnav {
display: block;
left: 14px;
top: 48px;
z-index: -1;
width: 550px;
position: absolute;
height: 90px;
border: 1px solid #edf0f3;
border-top: 0;
padding: 10px 0 10px 10px; 
overflow: hidden;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
-webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333')
}