JSFiddle - React, Tailwind, and code Playground

by Mikel

HTML

<div class="morado"></div>
<div class="rosa"></div>
<div class="foto img1">
    <img src="http://vignette4.wikia.nocookie.net/simpsons/images/0/0d/250px-Hank_Scorpio.png/revision/latest?cb=20130518065742">
</div>
<div class="foto img2">
    <img src="http://vignette4.wikia.nocookie.net/simpsons/images/0/0d/250px-Hank_Scorpio.png/revision/latest?cb=20130518065742">
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    position: relative;
}
.morado, .rosa {
    width: 100%;
    height: 50%;
    position: relative;
}
.morado {
    background-color: purple;
}
.rosa {
    background-color: pink;
}
.foto {
    position: absolute;
    width: 20%;
    height: 50%;
    top: 25%;
}
.foto img {
    max-height: 100%;
    max-width: 100%;
    top: 50%;
    position: relative;
    display: block;
    margin: 0 auto;
    transform: translateY(-50%);
}
.img1 {
    left: 0px;
}
.img2 {
    left: 20%;
}