JSFiddle - React, Tailwind, and code Playground

by k_rma

HTML

<div class="square">
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/139.jpg" class="wide" />
</div>
<br>
<div class="square">
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/286.jpg" class="tall" />
</div>
<br>
<div class="square">
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/139.jpg" class="tall" />
</div>
<br>
<div class="square">
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/286.jpg" class="wide" />
</div>

CSS

.square {
    width: 150px;
    height: 150px;
    background-color: #CCC;
    /* center align trick */
    line-height: 150px;
    text-align: center;
}
.square .wide {
    width: 100%;
    vertical-align: middle;
    /* center align trick */
}
.square .tall {
    height: 100%;
}