JSFiddle - React, Tailwind, and code Playground

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

.squaregallerywrap img {
min-width: 100%;
min-height: 100%;
max-height: 285px;
    display:block;
    margin:auto;
    position:relative;
    -moz-transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -o-transform:translateX(-50%);
    transform:translateX(-50%);
    left:50%;
}

li {    
	float: left;
	overflow: hidden;
	-webkit-transition: 0.4s all linear;
	transition: 0.4s all linear;
}