JSFiddle - React, Tailwind, and code Playground

by matmuchrapna

HTML

<link rel="stylesheet" href="http://52framework.googlecode.com/svn-history/r42/trunk/css/reset.css">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en">
<body>
<div id="main">
    <ul id="exp">
        <li><a href="#">rotate -90° <span>1</span></a></li>
        <li><a href="#">rotate -90° <span>2</span></a></li>
        <li><a href="#">rotate -90° <span>3</span></a></li>
        <li><a href="#">rotate -90° <span>4</span></a></li>
    </ul>
    
    <div id="content_wrap">
        <div id="content">
            content
        </div>
    </div>

</div>
</body>
</html>

CSS

#main {
    position: relative;
    }
#exp {
    /*
    */
    position: absolute;
    top: 0px;
    left: 0px;
    
    z-index: 1;

    
   /* IE8+ - must be on one line, unfortunately */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=3.061515884555943e-16, M12=1, M21=-1, M22=3.061515884555943e-16, SizingMethod='auto expand')";
   
   /* IE7 */

   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=3.061515884555943e-16,
            M12=1,
            M21=-1,
            M22=3.061515884555943e-16,
            SizingMethod='auto expand');
   /*
    */
    
    
    -webkit-transform: matrix(0.000,-1,1,0.000,0,0);
       -moz-transform: matrix(0.000,-1,1,0.000,0px,0px);
        -ms-transform: matrix(0.000,-1,1,0.000,0,0);
         -o-transform: matrix(0.000,-1,1,0.000,0,0);
            transform: matrix(0.000,-1,1,0.000,0,0);

    
    
    }

/* tabs */
#exp {
    width: 500px;
    height: 30px;
    overflow: hidden;
    padding-left: 0;
    }
#exp,
#exp li {
    list-style: none;
    }
#exp li {
    position: relative;
    }
#exp li {
    float: left;
    width: 110px;
    }
#exp li + li {
    margin-left: 8px;
    }
#exp li a {
    position: relative;
    height: 100%;
    display: block;
    float: left;
    height: 30px;
    width: 100%;
    padding-left: 0;
    }
#exp li a span {
    float: left;
    border-radius: 5px 5px 0 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 
         0px 1px 0px red inset,
         1px 0px 0px red inset,
        -1px 0px 0px red inset;
    background-color: orange;
    text-align: center;
    line-height: 30px;
    height: 30px;
    display: block;
    }
/* /tabs */

/* content */
#main {
    padding: 20px 50px;
    background-color: yellow;
    }
#content {
    background-color: orange;
    min-height: 500px;
    }
/* /content */