JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="container">
    
        <h1>Jacob Kelley</h1>
    <h2>Web Developer <span class="amp">&amp;</span> Designer, Movie Enthusiast, all with a taste for code.</h2>
        
        <h2>I live in Los Angeles, and commute to an office everyday to develop wonderful things.</h2>
        
        <h3>Right now I'm:</h3>
    <p>Working for <a href="http://dyrdek.com" target="_blank">Dyrdek Enterprises</a>, Developing <a href="http://di.tl" target="_blank">Di.tl</a>, and Posting on <a href="http://forrst.me/jakiestfu" target="_blank">Forrst</a></p>
        
    <div class="left box">
        <h3>If you want to get in touch:</h3>
    
        <p>
            <a href="http://forrst.me/jakiestfu" target="_blank">Forrst</a><br/>
            <a href="http://twitter.com/jakiestfu" target="_blank">Twitter</a><br/>
            <a href="http://dribbble.com/jakiestfu" target="_blank">Dribbble</a><br/>
            <a href="http://facebook.com/jakiestfu" target="_blank">Facebook</a><br/>
            <a href="mailto:[email protected]?Subject=Hello" target="_blank">E-mail</a>
        </p>
    </div>
    
    <div class="right box">
        <h3>Latest Selected Works: </h3>
    
        <p>
            <a href="http://dyrdek.com" target="_blank">Dyrdek Enterprises</a><br/>
            <a href="http://streetleague.com" target="_blank">Street League Skateboarding</a><br/>
            <a href="http://di.tl" target="_blank">Day in the Life</a><br/>
            <a href="http://psuedoexchange.com" target="_blank">Psuedo Exchange</a><br/>
        </p>
    </div>
    
    
    <!-- END #container -->
    </div>

CSS

/*-----------------------------------------------------------------------------------*/
/* CSS Reset & Clearfix - http://meyerweb.com/eric/tools/css/reset/
/*-----------------------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911);
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, 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 { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } /* End Clearfix */
::selection{
    color:#fff;
    text-shadow:0 1px 0 #000;
    background-color: #C84949;
}
::-moz-selection{
    color:#fff;
    text-shadow:0 1px 0 #000;
    background-color: #C84949;
}

/*-----------------------------------------------------------------------------------*/
/* Document Setup
/*-----------------------------------------------------------------------------------*/

body { 
    font: 14px/22px Helvetica, Arial, sans-serif;
    background: #ebebeb...