JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<ul>
    <li>
        <div class="squaregallerywrap">
            <img src="http://smartyet.com/assets/trail-blazer/images/gallery/2/1.jpg" />
        </div>
    </li>
    <li>
        <div class="squaregallerywrap">
            <img src="http://smartyet.com/assets/trail-blazer/images/gallery/2/2.jpg" />
        </div>
    </li>
    <li>
        <div class="squaregallerywrap">
            <img src="http://smartyet.com/assets/trail-blazer/images/gallery/2/3.jpg" />
        </div>
    </li>
    <li>
        <div class="squaregallerywrap">
            <img src="http://smartyet.com/assets/trail-blazer/images/gallery/2/4.jpg" />
        </div>
    </li>
    <li>
        <div class="squaregallerywrap">
            <img src="http://smartyet.com/assets/trail-blazer/images/gallery/2/5.jpg" />
        </div>
    </li>
    <li>
        <div class="squaregallerywrap">
            <img src="http://smartyet.com/assets/trail-blazer/images/gallery/2/6.jpg" />
        </div>
    </li>
    <li>
        <div class="squaregallerywrap">
            <img src="http://smartyet.com/assets/trail-blazer/images/gallery/2/7.jpg" />
        </div>
    </li>
    <li>
        <div class="squaregallerywrap">
            <img src="http://smartyet.com/assets/trail-blazer/images/gallery/2/8.jpg" />
        </div>
    </li>
    <li>
        <div class="squaregallerywrap">
            <img src="http://smartyet.com/assets/trail-blazer/images/gallery/2/9.jpg" />
        </div>
    </li>
    <li>
        <div class="squaregallerywrap">
            <img src="http://smartyet.com/assets/trail-blazer/images/gallery/2/10.jpg" />
        </div>
    </li>
    <li>
        <div class="squaregallerywrap">
            <img src="http://smartyet.com/assets/trail-blazer/images/gallery/2/11.jpg" />
        </div>
    </li>
    <li>
        <div class="squaregallerywrap">
            <img src="http://smartyet.com/assets/trail-blazer/images/gallery/2/12.jpg" />
        </div>
    </li>

CSS

.squaregallerywrap {
    width: 285px;
    height: 285px;
    overflow:hidden;
    margin:0;
    padding:0;
}
.squaregallerywrap img {
    min-width: 100%;
    min-height: 100%;
    display:block;
    margin:auto;
    position:relative;
    -moz-transform:translateX(-50%)translateY(-50%);
    -webkit-transform:translateX(-50%)translateY(-50%);
    -ms-transform:translateX(-50%)translateY(-50%);
    -o-transform:translateX(-50%)translateY(-50%);
    transform:translateX(-50%)translateY(-50%);
    left:50%;
    top:50%;
}
li {
    float: left;
    overflow: hidden;
    -webkit-transition: 0.4s all linear;
    transition: 0.4s all linear;
}