JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<link rel="stylesheet" href="http://genelocklin.appspot.com/css/reset.css">
<header role="banner">
    <a href="#">
    <hgroup>
        <h1>Hi. My Name is Gene.</h1>
        <h2>I Make Beautiful Webs.</h2>
    </hgroup>
    </a>
</header>

<div role="main">
     <article>
         <p>
Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum.</p>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod.</p>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </article>  
</div>

CSS

html { background: #fff; }

body { 
    font-size: 16px;   
    line-height: 24px; 
    margin: 0 auto;
    font-family: sans-serif;
    overflow: visible; 
    }

p { margin-bottom: 24px; }

header[role="banner"] { width: 100%;  background: #29292A;  }
header[role="banner"] a { color: white; margin-top: 50px; }
header[role="banner"] hgroup { max-width: 960px; margin: 0px auto;  padding: 24px 100px 400px 24px; }
header[role="banner"] h1,
header[role="banner"] h2 { font-size: 36px; margin-bottom: 16px; }
header[role="banner"] h2 { color: #DB5C00; }

div[role="main"] { 
    max-width: 960px; 
    width: 80%;
    margin: -10px auto 20px auto; 
    background: #fff; 
    padding: 3%; 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.45);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.45);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,.45);
    -o-box-shadow: 0 0 10px rgba(0,0,0,.45);
    box-shadow: 0 0 10px rgba(0,0,0,.45);
    position: relative;
    }
/*
div[role="main"]::after { 
    content:"";
    position: absolute;
    height: 410px;
    width: 960px; 
    width: 100%;
    margin: -10px auto 20px auto; 
    background-color:#ffffff;
    background-image: -moz-radial-gradient(50% 50%, circle cover, #ffffff 0%,#000000 150%);
    background-image: -webkit-radial-gradient(50% 50%, circle cover, #ffffff 0%,#000000 150%);
    background-image: -o-radial-gradient(50% 50%, circle cover, #ffffff 0%,#000000 150%);
    background-image: -ms-radial-gradient(50% 50%, circle cover, #ffffff 0%,#000000 150%);
    background-image: radial-gradient(50% 50%, circle cover, #ffffff 0%,#000000 150%);
    top: -400px;
    left: 0;
    -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.75s; -webkit-transition-timing-function: ease; -webkit-transition-delay: initial; -webkit-transform-origin-x: 0%; -webkit-transform-origin-y: 100%; -webkit-transform: scale(1) rotateX(64deg) rotateY(0deg) translate(0px, 0px) skew(0deg, 0deg) scaleZ(0.2) rotateZ(0deg) translateZ(0px);  ...

JavaScript

// work in progress