JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cadre img1"></div>
<div class="cadre img2"></div>

CSS

.cadre {
    display: inline-block;
    width: 150px; height: 150px;
    border: solid 1px black;
}

.img1, .img2 {
    background-image: url('http://fr.wikimediation.org/images/0/0e/Drapeau_francais.jpg');
    background-size: auto 150px;
    background-repeat: no-repeat;
}

.img1 {
    background-position: 0 0;
}

.img2 {
    background-position: -96px 0;
}