JSFiddle - React, Tailwind, and code Playground

by RenaissanceDesign

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
    <div id="wrapper">
        <nav id="navbar-center" class="clearfix">
            <ul id="main-nav-list">
                <li class="above-800"><a href="#">Home</a></li>
                <li class="below-800 home-icon"><a href="#"></a></li>
                <li class="above-800"><a href="#">Latest submissions</a></li>
                <li class="below-800"><a href="#">Latest</a></li>
                <li class="above-800 current_page_item"><a href="#">Who are we?</a></li>
                <li class="below-800 current_page_item"><a href="#">About</a></li>
                <li class="above-800"><a href="#">Submit your tales of woe</a></li>
                <li class="below-800"><a href="#">Submit</a></li>
                <li class="above-800"><a href="#">Contact us</a></li>
                <li class="below-800"><a href="#">Contact</a></li>
            </ul>
            <ul id="secondary-nav-list">
                <li><a href="#">Facebook</a></li>
                <li><a href="#" title="@salesjacker">Twitter</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

CSS

/* -- RESET (inc HTML5) -- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,
legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;font-family:inherit;font-size:100%;
font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align: baseline}:focus{/* remember to define focus styles! */outline:0}body{background:#fff;line-height:1}ol,ul{list-style: none}
table{/* tables still need 'cellspacing="0"' in the markup */border-collapse:separate;border-spacing:0}caption,th,td{font-weight:normal;text-align:left}blockquote:before,blockquote:after,q:before,q:after{content: ""}
blockquote,q{quotes: "" ""}a img{border: 0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display: block}.clear{clear:both}.clearfix:after{content:".";visibility:hidden;display:block;height:0;
clear:both}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}del{text-decoration: line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}

/* Actual Styles */
body {
    padding-top: 40px;
    background-color:#f3f3f3;
}
#wrapper {
    max-width:1020px;
    margin-right: auto;
    margin-left: auto;        
}
#navbar-center {
    height: 41px;
    width: 99%;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    color: #EBEBEB;
    text-shadow: -1px -1px 0px #1b1b1b;
    filter: dropshadow(color=#000000, offx=-1, offy=-1);
    float:left;
    background: #7f7f7f; /* Old browsers */
    background: -moz-linear-gradient(top,  #7f7f7f 2%, #333333 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#7f7f7f), color-stop(100%,#333333)); /* Chrome,Safari4+ */
   ...