JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="box">
        <p>
            Lorem ipsum dolor sit amet
        </p>
        <div class="img-wrapper">
            <span>
            <img src="https://i.imgur.com/yvMCRsv.jpg" />
            </span>
            <span>
            <img src="https://i.imgur.com/efFdd14.jpg" />
            </span>
            <span>
            <img src="https://i.imgur.com/7Yv987J.jpg" />
            </span>
        </div>
    </div>
</div>

CSS

html,
body {
    background-color: #eee;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.container {
    display: block;
    width: 100%;
}

.box {
    display: inline-block;
    /*
    In the production "max-width" will be set to a percentage value rather than px units
    Using pixels here just for illustration purposes
    */
    max-width: 380px;
    padding: 20px;
    margin: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
}

.img-wrapper {
}

.img-wrapper span {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 128px;
    height: 128px;
    border-radius: 10px;
    float: left;
    margin: 0px 5px 5px 0px;
}

.img-wrapper span:nth-of-type(2n + 1){
  clear: left;
}

.img-wrapper img {
    max-width: 196px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}