JSFiddle - React, Tailwind, and code Playground

by Lucas Krause

HTML

<section class="portrait">
    <div class="portrait__bubble portrait__bubble--m">
        <img src="http://futape.de/css/img/pixel.png" alt="" />
    </div>
    <div class="portrait__bubble portrait__bubble--c">
        <img src="http://futape.de/css/img/pixel.png" alt="" />
    </div>
    <div class="portrait__bubble portrait__bubble--y">
        <img src="http://futape.de/css/img/pixel.png" alt="" />
    </div>
    <div class="portrait__bubble portrait__bubble--img">
        <img src="http://i.imgur.com/LKenKqv.jpg" alt="" />
    </div>
</section>

CSS

html,
body {
    margin:0;
    padding:0;
}

.portrait {
    max-width:400px;
    position:absolute;
    top:50%;
    left:50%;
    width:80%;
}
    .portrait__bubble {
        border-radius:50%;
    }
        .portrait__bubble img {
            width:100%;
            display:block;
        }
    
    .portrait__bubble--m {
        background:#ee3f60;
        width:60%;
    }
    .portrait__bubble--c {
        background:#3ea1f4;
        margin-top:-40%;
        margin-left:45%;
        width:55%;
    }
    .portrait__bubble--y {
        background:#f9e035;
        width:50%;
        margin-left:15%;
        margin-top:-25%;
    }
    .portrait__bubble--img {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        width:40%;
        box-sizing:border-box;
        border:solid #fff 5px;
        overflow:hidden;
    }

/** /
.portrait {
    max-width:400px;
}

@media screen and (min-width:500px) { /*500 = 400 / 0.8* /
    .portrait {
        margin:-200px 0 0 -200px;
    }
}
/*/
.portrait {
    transform:translate(-50%, -50%);
}
/**/

/*@media screen and (max-width:320px) {
    .portrait__bubble
}*/
}