JSFiddle - React, Tailwind, and code Playground

by Taqi_Shah

HTML

<div id="wrapper">
    <div id="content">
		
        <nav>
            <ul id="appleNav">
                <li><a href="http://www.apple.com/" title="Apple"><img src="images/logo.png" alt="Apple Logo" /></a></li>
                <li><a href="http://store.apple.com/" title="Store">Store</a></li>
                <li><a href="http://www.apple.com/mac/" title="Mac">Mac</a></li>
                <li><a href="http://www.apple.com/ipod/" title="iPod">iPod</a></li>
                <li><a href="http://www.apple.com/iphone/" title="iPhone">iPhone</a></li>
                <li><a href="http://www.apple.com/ipad/" title="iPad">iPad</a></li>
                <li><a href="http://www.apple.com/itunes/" title="iTunes">iTunes</a></li>
                <li><a href="http://www.apple.com/support/" title="Support">Support</a></li>
                <li>
                    <form>
                        <input type="text" />
                    </form>
                </li>
            </ul>
        </nav>
		
    </div>
</div>

CSS

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
h1 { font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; text-align: center; color: #000; font-size:60px; letter-spacing:-1px; }
h1 small{ font-size: 24px; display: block; color: #636363; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:980px; margin:40px auto; }

/* CONTENT */
#content { margin-top:50px; }
#content p { font: 14px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; color:#333333; line-height:18px; margin:15px auto; width:800px; }
#content p a { color:#0088CC; text-decoration:none; }
#content p a:hover { text-decoration:underline; }

/* APPLE STYLE NAVIGATION MENU */
#appleNav { margin:40px 0; list-style:none;

    /* Lucinda Grande is the font used on the website from Apple. */
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;
    
    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #202020;

    /* We want to add the shadow to the complete navigation menu. In order to do that, we'll need to set
    the correct width and height, and also the correct borders, in order to create the perfect drop shadow */
    width:980px; height:34px;
    
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
}

#appleNav li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:105px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878),...