JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<html>
<body>
    <div class="imageContainer">
        <img src="http://placekitten.com/300/300" />
    </div>
    <div class="imageContainer">
        <img src="http://placekitten.com/301/301" />
    </div>
    <div class="imageContainer">
        <img src="http://placekitten.com/302/303" />
    </div>
    <div class="imageContainer">
        <img src="http://placekitten.com/303/303" />
    </div>    
</body>
</html>

CSS

.imageContainer {
    position: relative;
    width: 23%;
    padding-bottom: 23%;
    float: left;
    height: 0;
    margin: 1%;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}