JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div class="wrap">
    <article>
        <figure class="random">
            <img src="http://36.media.tumblr.com/24ca7161a177e8fb35ead2a4cecb6515/tumblr_nasj2gp6SN1qbqx70o1_500.jpg" alt="" />
            <figcaption>A</figcaption>
        </figure>
        <figure class="random">
            <img src="http://41.media.tumblr.com/e1e4dbb98fd1105b3d14f941697300ed/tumblr_n5y1bxAM8Y1qbqx70o1_500.jpg" alt="" />
            <figcaption>B</figcaption>
        </figure>
        <figure class="random">
            <img src="http://41.media.tumblr.com/30a7eb08f95e28f0f271d347607a6ea5/tumblr_n5y13xuiRO1qbqx70o1_500.jpg" alt="" />
            <figcaption>C</figcaption>
        </figure>
        <figure class="random">
            <img src="http://40.media.tumblr.com/73ab94e87d9491cd9c0a1b2f91042a1d/tumblr_n6cfc2pQ251qbqx70o1_500.jpg" alt="" />
            <figcaption>D</figcaption>
        </figure>
        <figure class="random">
            <img src="http://40.media.tumblr.com/95a8933117c4544144aa1fad5f8f6b3b/tumblr_n1kawz9mHB1qbqx70o1_500.jpg" alt="" />
            <figcaption>E</figcaption>
        </figure>
        <figure class="random">
            <img src="http://40.media.tumblr.com/b1183578afb2b3783f8066048d1c0ebc/tumblr_myhishAlQZ1qbqx70o1_r1_500.jpg" alt="" />
            <figcaption>F</figcaption>
        </figure>
        <figure class="random">
            <img src="http://41.media.tumblr.com/01fa96cb1d77a2c385015bb50681cd88/tumblr_myhiytMZYK1qbqx70o1_500.jpg" alt="" />
            <figcaption>G</figcaption>
        </figure>
        <figure class="random">
            <img src="http://40.media.tumblr.com/75f3cd6f0461fc7aa62f0ea166e550dd/tumblr_mye8z7BmZu1qbqx70o1_500.jpg" alt="" />
            <figcaption>H</figcaption>
        </figure>
        <figure class="random">
            <img src="http://40.media.tumblr.com/8139eb992202a205fe13391764a21def/tumblr_mye8uhtWCV1qbqx70o1_500.jpg" alt="" />
            <figcaption>I</figcaption>
        </figure>
   ...

CSS

body {
  background-color: white;
  font-family: "ff-tisa-web-pro",serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
}

article {
    padding: 1em;
    -webkit-columns: 4 400px;
       -moz-columns: 4 400px;
            columns: 4 400px;
}

figure {
  width:100%;
  height:auto;
    margin: 0;
    margin-bottom: 10px;
}

img {
  height: 13em;
  width: auto;
  margin-bottom: 1.3em;
}

figcaption {
  position: fixed;
  color: black;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
    top: 0;
}

figure:hover figcaption {
  opacity: 1;
    z-index: 99999999;
}



html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 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, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-decoration: none; color: #000; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0px; }
body { height:100%; width:100%; }

JavaScript

function randomize() {
    var elts = document.querySelectorAll('figure.random');
    var array = Array.prototype.slice.call(elts);
    array.forEach(function (elt) {
        elt.style.textAlign = getDirection();
    });
}

function getDirection() {
    var roll = Math.random();
    if (roll < 0.33) {
        return 'left';
    } else if (roll > 0.66) {
        return 'right';
    }
    return 'center';
}
randomize();