JSFiddle - React, Tailwind, and code Playground

by sulfureous

HTML

<h2>320px images</h2>
<article>
    <figure class="fortyEight" style="background-image: url(http://dummyimage.com/320x320/000/fff);"></figure>
    <figure class="fortyEight" style="background-image: url(http://dummyimage.com/320x320/000/fff);"></figure>
</article>

<h2>333px images</h2>
<article>
    <figure class="fortyFour" style="background-image: url(http://dummyimage.com/333x333/000/fff);"></figure>
    <figure class="fortyFour" style="background-image: url(http://dummyimage.com/333x333/000/fff);"></figure>
</article>

CSS

article {
    overflow: auto;
    background-color: #EEE;
    border: 1px solid #CCC;
    margin: 1em 0;
}
article > figure.fortyEight,
article > figure.fortyFour {
    float: right;
    margin: 1em;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: red;
    box-sizing: border-box;  
}
article > figure.fortyEight {
    width: 48px;
    height: 48px;
}
article > figure.fortyFour {
    width: 44px;
    height: 44px;
}