JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<link rel="stylesheet" href="http://genelocklin.appspot.com/css/reset.css">
        <div role="banner" id="header">
            <a id="logo" href="index.html">Site Name</a>
        </div>

        <nav>
            <ul>
                <li><a href="index.html" rel="">home</a></li> 
                <li><a href="work.html" rel="">work</a></li>
                <li><a href="contact.html" rel="">contact</a></li>
                <li><a href="resume.html" rel="">resume</a></li>
            </ul>
        </nav>

        <div role="main" id="main">        
            <ul id="showcase">
                <li><a id="snapshot-1" class="snapshot" href="work.html">Project Title</a></li>
                <li><a id="snapshot-2" class="snapshot" href="work.html">Project Title</a></li>
                <li><a id="snapshot-3" class="snapshot" href="work.html">Project Title</a></li>
                <li><a id="snapshot-4" class="snapshot" href="work.html">Project Title</a></li>
                <li><a id="snapshot-5" class="snapshot" href="work.html">Project Title</a></li>
                <li><a id="snapshot-6" class="snapshot" href="work.html">Project Title</a></li>    
            </ul> 
        </div>

            <div id="about">
                <p>Hello, my name is Kirsty Marr and I am a graphic designer and photographer. I'm currently a student at Texas Tech University studying Communication Design. I enjoy all areas of graphic design, with a special interest in packaging and branding.</p>
                <p>I find beauty in simple and complex designs and enjoy working in both styles. I also have a passion for photography and balanced, aesthetically pleasing graphic design.</p>
            </div>
                
        
        
        <footer class="cf">
            <ul>
                <li><a href="http://twitter.com/twicetorn"><img src="http://kirstymarr.com/3/images/sm_04.gif"></a></li> 
                <li><a href="http://www.facebook.com/kirstymarr"><img...

CSS

/*------------------------------------------------------------------

type (base type styles)

http://jsbin.com/acide4/8/
http://snook.ca/archives/html_and_css/font-size-with-rem
http://coding.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/

------------------------------------------------------------------*/
/*- 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-tap-highlight-color: rgba(250,0,0,1);
    }

/*- body ----------*/    
body { 
    color: #111; 
    font-family: 'Raleway', 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;
    }

/*- setting up line height for block elements--------- */
blockquote, address, dl, ul, ol { 
    font-size:16px;font-size:16rem;
    line-height:24px;line-height:24rem; 
    margin-bottom:24px;margin-bottom:24rem; 
    }

/*- 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;}

body { /*max-width: 960px;*/ width: 90%; margin-left:auto;margin-right:auto; }

/* 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...

JavaScript

WebFontConfig = {
    google: { families: [ 'Raleway:100:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();