JSFiddle - React, Tailwind, and code Playground

by sanooj

HTML

<div id="frame">
    <ul>
        <li><a href="javascript:void(0);">Tab 01</a></li>
        <li><a href="javascript:void(0);" class="active">Tab 02</a></li>
        <li><a href="javascript:void(0);">Tab 03</a></li>
        <li><a href="javascript:void(0);">Tab 04</a></li>
    </ul>
</div>
<div id="frame2">Frame 02</div>

CSS

#frame,#frame ul
{ height:30px;
   background:#f0f0f0;
}
#frame ul li
{ height:30px;
  float:left;
    padding-right:2px;
}
#frame ul li a
{ position:relative;
  height:30px;
  display:block;
  float:left; /* for IE6 bug */
  background-color:#f00;
  left:0;
    top:0;
    padding:0 4px;
    color:#fff;
}
#frame ul li a:hover,#frame ul li a.active
{  height:40px;
}
#frame2
{  border:#000 1px solid;
    padding:10px;
}