JSFiddle - React, Tailwind, and code Playground

by rcravens

HTML

<div id="wrap">
    <div id="ribbon">Main Menu</div>
    <div id="page">
        <ul>
            <li>Home Page</li>
            <li>Tutorials</li>
            <li>Blog</li>
            <li>Gallery</li>
            <li>About Us</li>
        </ul>
    </div>
</div>

CSS

body{
    background-color: #f2f2f2; 
}
#wrap{
    width: 250px;
    margin: 0 auto;
    position: relative;
}
#page{
    background-color: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 70px 0 0 0;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,.5);
}
#ribbon{
    background-color: #7f9db9;
    height: 50px;
    width: 270px;
    position: absolute;
    top: 20px;
    left: -11px;
    text-align: center;
    font-size: 32px;
    color: #fff;
    border: 1px solid #7d90a3;
}
#ribbon:before{
    content: '';
    border-color: transparent #7d90a3 transparent transparent;
    border-style: solid;
    border-width: 0px 10px 15px 0px;
    width: 0px;
    height: 0px;
    display: block;
    position: absolute;
    top: 50px;
    left: 0px;
}
#ribbon:after{
    content: '';
    border-color: transparent transparent transparent #7d90a3;
    border-style: solid;
    border-width: 0px 10px 15px 10px;
    width: 0px;
    height: 0px;
    display: block;
    position: absolute;
    top: 50px;
    right: -10px;
}
#page ul{
    list-type: none;   
    font-size: 20px;
}
#page ul li{
    text-align: center;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #888;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    color: #606060;
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
    background: -moz-linear-gradient(top,  #fff,  #ededed);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
    padding: 10px 0;
}
#page ul li:last-child{
    border-bottom: none;   
    border-bottom-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
}
#page ul li:hover{
    background: #ededed;
   ...