JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div id="content">
        <img src="http://www.dummyimage.com/400x226/000000/fff.jpg&text=1.1+first" class="first" alt=""/>
        <img src="http://www.dummyimage.com/400x226/fff/000.jpg&text=1.2" alt=""/>
        <img src="http://www.dummyimage.com/400x226/000000/fff.jpg&text=1.3" alt="" />
        <img src="http://www.dummyimage.com/400x226/fff/000.jpg&text=1.4+last" class="last" alt="" />
    
        <img src="http://www.dummyimage.com/400x226/000000/fff.jpg&text=2.1+first" class="first" alt=""/>
        <img src="http://www.dummyimage.com/400x226/fff/000.jpg&text=2.2" alt=""/>
        <img src="http://www.dummyimage.com/400x226/000000/fff.jpg&text=2.3" alt="" />
        <img src="http://www.dummyimage.com/400x226/fff/000.jpg&text=2.4+last" class="last" alt="" />
</div>

CSS

html, body {
    height: 100%;
}

#content {
    width: 90%;
    background-color: whiteSmoke;
    margin: 0 auto;
    overflow: hidden;
    height: 100%;
    padding: 0;
}

img {
    max-width: 400px;
    width: 20%;
    float: left;
    padding: 0;
}

JavaScript

function imageHandler() {
    var w = $("#content").width();
    var i = $("img").width();
    var imgWMargin = (w - 4*i)/5;
    
    $("img").css("marginRight", imgWMargin);
    $(".first").css("marginLeft", imgWMargin);
    
    var h = $("#content").height();
    var j = $("img").height();
    var imgHMargin = (h - 2*j)/3;
    
    $("img").css("marginTop", imgHMargin);
}

imageHandler(); 

$(window).resize(function() {
    imageHandler(); 
});