JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div id="logomenuwrapper">
    <div id="logo">
        <img src="http://codesigner.be/maarten/pf/img/logo_light.jpg" />
    </div>
    <div id="menu">
        <ul>
            <li><a href="#">About</a>

            </li>
            <li class="notfirst"><a href="#">Work</a>

            </li>
            <li class="notfirst"><a href="mailto:[email protected]?subject=Hello">Contact</a>

            </li>
        </ul>
    </div>
</div>

CSS

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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    border:none;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
a {
    text-decoration:none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/********************/

/*css puts standard img display on inline,which always preserves a few pixels of whitespace around it. here we dont want it*/
 img {
    display:block;
}
/*make imgs and such shrink to parent size. good for responsiveness*/
 img, embed, object, video {
    max-width:100%;
}
/********************/
 body {
    font-family:'Source Sans Pro', sans-serif;
    line-height:1;
    font-size:100%;
    /*about 16px is standard font size setting*/
    color:#58595b;
}
@media screen and (max-width: 800px) {
    body {
        font-size: 85%;
    }
    #logo img {
        width:84%;
    }
}
@media screen and (max-width: 400px) {
    body {
        font-size: 75%;
    }
    #logo img {
        width: 75%;
    }
}
#header #topbar {
    width:100%;
    height:2px;
    background:#58595b;
}
#header {
    width:100%;
    height:100px;
}
.container {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    max-width:1000px;
   ...