JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<section id="articles" class="content span-3 list clear list-projects list-blocks"> <a href="http://www.blacksheepdesign.co.nz/design/interior-motifs/" class="item to-right"> 
                <div class="item-image" style="background-color:#00BE9C; background-image:url('http://www.blacksheepdesign.co.nz/wp-content/uploads/2014/02/00958_0147.jpg_effected-800x533.jpg');"></div> 
                               
            </a>  <a href="http://www.blacksheepdesign.co.nz/design/frankie-grace/" class="item to-left"> 
                <div class="item-image" style="background-color:#FFC800; background-image:url('http://www.blacksheepdesign.co.nz/wp-content/uploads/2014/03/FG_homepagelogo.svg');"></div> 
                              
            </a>  <a href="http://www.blacksheepdesign.co.nz/design/hino/" class="item to-left"> 
                <div class="item-image" style="background-color:#4d4d4d; background-image:url('http://www.blacksheepdesign.co.nz/wp-content/uploads/2014/02/0013-800x533.jpg');"></div> 
                              
            </a>  <a href="http://www.blacksheepdesign.co.nz/design/caritas/" class="item to-left"> 
                <div class="item-image" style="background-color:#ED5E68; background-image:url('http://www.blacksheepdesign.co.nz/wp-content/uploads/2014/02/caritaschallenge.svg');"></div> 
                               
            </a>  <a href="http://www.blacksheepdesign.co.nz/design/snapchill/" class="item to-left"> 
                <div class="item-image" style="background-color:#009BC0; background-image:url('http://www.blacksheepdesign.co.nz/wp-content/uploads/2014/03/01083_0057-800x533.jpg');"></div> 
                               
            </a>  <a href="http://www.blacksheepdesign.co.nz/design/braxmere/" class="item to-top"> 
                <div class="item-image" style="background-color:#80A1B6; background-image:url('http://www.blacksheepdesign.co.nz/wp-content/uploads/2014/03/braxmere.svg');"></div> 
               ...

CSS

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
    margin:0;
    padding:0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
h1, h2, h3, h4, h5, h6 {
    font-size:100%;
    font-weight:normal
}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
    display:block
}
a {
    text-decoration:none;
    outline:0 none;
    color:inherit
}
a img {
    border:0 none
}
hr {
    border:0 none;
    display:block
}
input[type="submit"] {
    border:0 none
}
#infscr-loading {
    display:none !important
}
.clear:before, .clear:after {
    content:" ";
    display:table
}
.clear:after {
    clear:both
}
.clear {
    *zoom:1
}
::selection {
    background:#333;
    color:#fff
}
::-moz-selection {
    background:#333;
    color:#fff;
    text-shadow:0 0 1px #333
}
.content-header header, #join {
    padding-top:270px
}
@media only screen and (max-height: 960px) {
    .content-header header, #join {
        padding-top:130px
    }
}
.list-blocks, .box-wrapper {
    min-height:200px
}
.list-blocks, .list-blocks .item .item-image, .box-wrapper, .single-design .item, .single-design, .single-design .bg, .single-design .bg .svg, .content-join, .nav.pre-loading, .nav a:after {
    position:absolute;
    width:100%;
    height:100%
}
h2.title, .main-menu, .list-blocks .item .item-desc h3, .content-header header h1, .single-page-content header h1, .content-join h2, .nav a h4 {
    font-family:'eagle book regular';
    font-size:1.35rem;
    text-transform:uppercase
}
.entry-content p, .list-blocks .item .item-desc p, .box .entry-content p, .content-header header p, .single-page-content header h4, .field input.submit, .field input.text, .form *[role="alert"] {
    font-family:"gotham light";
    font-size:1rem;
    color:gray
}
.list-blocks .item .item-image,...