JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<link rel="stylesheet" href="http://genelocklin.appspot.com/css/reset.css">

    <header id="header" role="banner">
        <h1><a href="#">This is a Header</a></h1>
    </header><!-- /header/banner -->
    
    <nav id="nav" role="navigation" class="cf">
        <ul id="main-nav" class="cf">
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
            <li><a href="#">link4</a></li>
        </ul><!-- /main-nav -->
    </nav><!-- /nav -->
        
    <div id="main" role="main" class="cf">

        <article class="hentry">
            <header class="entry-title">
                <h1><a href="#">Entry Title Here</a></h1>
            </header><!-- /header/entry-title -->
            <div class="entry-content">
                <p>There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.</p>
                                <p>Children of the sun, see your time has just begun, searching for your ways, through adventures every day. Every day and night, with the condor in flight, with all your friends in tow, you search for the Cities of Gold. Ah-ah-ah-ah-ah... wishing for The Cities of Gold. Ah-ah-ah-ah-ah... some day we will find The Cities of Gold. Do-do-do-do ah-ah-ah, do-do-do-do, Cities of Gold. Do-do-do-do, Cities of Gold. Ah-ah-ah-ah-ah... some day we will find The Cities of Gold.</p>
                                <p>Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
      ...

CSS

/*- base 1px ----------*/
html {font-size:6.25%;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;-o-text-size-adjust:none;text-size-adjust:none;} 

/*- text ----------*/
/*html,body {text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}*/

/*- body ----------*/    
body {color:#222;font-family:sans-serif;font-weight:normal;font-size:16em;font-size:16rem;line-height:24px;line-height:24rem;}

/*- p ----------*/
p {font-size:16px;font-size:16rem;line-height:24px;line-height:24rem;margin-bottom:24px;margin-bottom:24rem;}
.entry-content p:first-child{font-size:18px;font-size:18rem;color:#000;}

/*- links ----------*/
a {text-decoration:none;}

/*- headers ----------*/
h1,h2,h3,h4,h5,h6 {font-weight: bold;margin-bottom:24px;margin-bottom:24rem;}
h1, h1 a{font-size:26px;font-size:26rem;}
h2, h2 a{font-size:24px;font-size:24rem;}
h3, h3 a{font-size:22px;font-size:22rem;}
h4, h4 a{font-size:20px;font-size:20rem;}
h5, h5 a{font-size:18px;font-size:18rem;}
h6, h6 a{font-size:16px;font-size:16rem;}
h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{margin:0;}

/*- 320 body ----------*/
body{background:#f1f2f3;width:90%;margin:0 auto;padding:24px 0;padding:24rem 0;}

/*- top shadow ----------*/
body:before {content:"";position: fixed;height:10px;width:120%;top:-10px;left:-10px;-webkit-box-shadow:0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow:0px 0px 10px rgba(0,0,0,.8);-ms-box-shadow:0px 0px 10px rgba(0,0,0,.8);-o-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow:0px 0px 10px rgba(0,0,0,.8);z-index:1000;}

/*- 320 header ----------*/
#header{text-align:center;margin-bottom:24px;margin-bottom:24rem;}
#header h1{margin-bottom:0;}
#header h1 a{display:block;padding:12px 0;padding:12rem 0;color:#111;background-color:#fff;}

/*- 320 nav ----------*/
#nav{background-color:#fff;margin: 0 0 24px 0;margin: 0 0 24rem 0;}
#nav ul#main-nav li{text-align:center;width:22%;margin:0 1.5%;display:block;float:left;}
#nav ul#main-nav li...