JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div class="home blog">
    <div id="page" class="hfeed site">

        <!-- #masthead -->
        <div id="content" class="site-content">
            <div id="primary" class="content-area">
                <main id="main" class="site-main" role="main">
                    
                    
                    
                    
               <div class="column-left desktop">
                        <article><a href="#">
				<img src="http://stefanieklopf.com/wp-content/uploads/2014/11/Unbenannt-1-533x800.jpg" class="featured-image portrait" alt=" Stefanie Klopf / Stylist" />
				<span class="title">ONE</span>
			</a>

                        </article>
                        <article><a href="#">
				<img src="http://stefanieklopf.com/wp-content/uploads/2014/05/superior-1-533x800.jpg" class="featured-image portrait" alt=" Stefanie Klopf / Stylist" />
				<span class="title">Superior</span>
			</a>

                        </article>
                        <article><a href="#">
				<img src="http://stefanieklopf.com/wp-content/uploads/2014/08/ucon-1-533x800.jpg" class="featured-image portrait" alt=" Stefanie Klopf / Stylist" />
				<span class="title">Ucon Acrobatics</span>
			</a>

                        </article>
                        <article><a href="#">
				<img src="http://stefanieklopf.com/wp-content/uploads/2013/08/V2K8306-800x533.jpg" class="featured-image landscape" alt=" Stefanie Klopf / Stylist" />
				<span class="title">Miami Hue</span>
			</a>

                        </article>
                        <article><a href="#">
				<img src="http://stefanieklopf.com/wp-content/uploads/2014/02/StefanieKlopf_Bite-06-533x800.jpg" class="featured-image portrait" alt=" Stefanie Klopf / Stylist" />
				<span class="title">Bite</span>
			</a>

                        </article>
                        <article><a href="#">
				<img src="http://stefanieklopf.com/wp-content/uploads/2013/08/V2K5879-800x533.jpg" class="featured-image landscape"...

CSS

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, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
body {
    background: #fff;
}
article, aside, details, figcaption, figure, footer, header, main, nav, section {
    display: block;
}

img {
    height: auto;
    max-width: 100%;
}


/* Clearing */
 .clear:before, .clear:after, [class*="content"]:before, [class*="content"]:after, [class*="site"]:before, [class*="site"]:after {
    content:'';
    display: table;
}
.clear:after, [class*="content"]:after, [class*="site"]:after {
    clear: both;
}

/* =Content
----------------------------------------------- */
 .sticky {
}
.hentry {
    margin: 0 0 1.5em;
}
.byline, .updated {
    display: none;
}
.single .byline, .group-blog .byline {
    display: inline;
}
.page-content, .entry-content, .entry-summary {
    margin: 1.5em 0 0;
}
.page-links {
    clear: both;
    margin: 0 0 1.5em;
}
/* =Asides
----------------------------------------------- */
 .blog .format-aside .entry-title, .archive .format-aside .entry-title {
    display: none;
}
/* =Media
----------------------------------------------- */
 .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}
.wp-caption {
    border: 1px solid #ccc;
    margin-bottom: 1.5em;
    max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 1.2% auto 0;
    max-width: 98%;
}
.wp-caption-text {
    text-align: center;
}
.wp-caption .wp-caption-text {
    margin: 0.8075em...