JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<header>
    <h1 class="logo">osnipe</h1>
    
    <nav>
        <ul>
            <li><a href="#/what">What?</a></li>
            <li><a href="#/what">Who?</a></li>
            <li><a href="#/what">How?</a></li>
            <li><a href="#/what">Why?</a></li>
        </ul>
    </nav>
</header>
    
<p>Tempor yr reprehenderit nisi fap, eiusmod laborum kogi pickled proident master cleanse quinoa incididunt polaroid. Sunt fingerstache keffiyeh accusamus post-ironic, godard jean shorts sint vice mlkshk seitan pop-up before they sold out. Consequat truffaut sint thundercats 8-bit, williamsburg fingerstache. Semiotics occupy photo booth sustainable accusamus authentic commodo. Incididunt est carles truffaut gluten-free, banh mi pitchfork whatever elit laboris dreamcatcher iphone raw denim. Kogi vinyl mixtape sapiente cred cosby sweater. Ea jean shorts et sint est, godard Austin elit.</p>

<h1>What?</h1>

<span class="important">Tempor yr reprehenderit nisi fap, eiusmod laborum kogi pickled proident master cleanse quinoa incididunt polaroid. Sunt fingerstache keffiyeh accusamus post-ironic, godard jean shorts sint vice mlkshk seitan pop-up before they sold out. Consequat truffaut sint thundercats 8-bit, williamsburg fingerstache. Semiotics occupy photo booth sustainable accusamus authentic commodo. Incididunt est carles truffaut gluten-free, banh mi pitchfork whatever elit laboris dreamcatcher iphone raw denim. Kogi vinyl mixtape sapiente cred cosby sweater. Ea jean shorts et sint est, godard Austin elit.</span>

CSS

html {font-size: 93.75%} * {line-height: 1.4375em}
body { font: 1em/1.4375em "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #FEFEFE; color: #252525; text-shadow: rgba(255,255,255,0.2) 0 1px 1px, rgba(255,255,255,0.05) 0 -1px 1px;
    -webkit-font-smoothing: antialiased}
::selection, ::-moz-selection {background: rgba(89,156,255,0.55); color: inherit; text-shadow: rgba(255,255,255,0.01) 0 1px 1px}
@font-face {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/headers/hIEfix.png,sizingMethod=crop); zoom: 1}
h1, h2, h3, h4, h5, h6 {-webkit-font-smoothing: subpixel-antialiased}
* > h1:first-child, * > h2:first-child, * > h3:first-child,
* > h4:first-child, * > h5:first-child, * > h6:first-child {margin-top: -0.2em}





body {
    width: 80%;
    min-width: 280px;
    max-width: 800px;
    text-align: justify;
    padding: 20px;
    margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #252525;
    -webkit-font-smoothing: subpixel-antialiased;
}
h1 {font-size: 2em; line-height: 1em; margin-top: 0.5em}

span.important {
    display: block;
    display: inline-block;
    padding: 12px; margin: 15px -13px;
    background: #f9f9f9;
    color: rgba(0,0,0,0.75);
    text-shadow: rgba(255,255,255,0.9) 0 3px 1px, rgba(255,255,255,0.1) 0 -1px 1px;
    border: 1px solid #fafafa; border-radius: 4px;
    box-shadow: rgba(0,0,0,0.3) 0 0 1px, rgba(0,0,0,0.1) 0 2px 4px;
}

header {
    padding: 1em 0 0 0;
}

h1.logo {
    display: inline-block;
    padding: 0.1em 0.2em 0.2em;
    margin: -0.3em -0.2em 0.3em;
    background: rgba(0,0,0,0.9);
    color: rgba(255,255,255,1); text-shadow: rgba(0,0,0,0,1) 0 -1px 1px;
    letter-spacing: -0.08em;
    font-size: 3em; line-height: 1em;
    
    border-radius: 2px;
    box-shadow: rgba(0,0,0,0.5) 0.15em 0.15em 0, inset rgba(255,255,255,0.5) 0.15em 0.15em 0;
}

nav {
    display: block;
    float: right;
    min-height: 2em;
    margin: 0.5em 0 0;
    text-align: right;
}

nav ul {
 ...