JSFiddle - React, Tailwind, and code Playground

by Lucas Krause

HTML

<section class="portrait">
    <div class="portrait__bubble portrait__bubble--m"></div>
    <div class="portrait__bubble portrait__bubble--c"></div>
    <div class="portrait__bubble portrait__bubble--y"></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 {
    position:absolute;
    top:50%;
    left:50%;
    width:80%;
    height:0;
    padding-top:80%;
    z-index:0;
    transform:translate(-50%, -50%);
}
    .portrait__bubble {
        border-radius:50%;
        position:absolute;
    }
    .portrait__bubble--m {
        background-color:#ee3f60;
        width:60%;
        height:60%;
        top:0;
        left:0;
        z-index:0;
    }
    .portrait__bubble--c {
        background-color:#3ea1f4;
        top:20%;
        right:0;
        width:55%;
        height:55%;
        z-index:1;
    }
    .portrait__bubble--y {
        background-color:#f9e035;
        width:50%;
        height:50%;
        left:15%;
        bottom:0;
        z-index:2;
    }
    .portrait__bubble--img {
        top:50%;
        left:50%;
        z-index:3;
        width:40%;
        height:40%;
        transform:translate(-50%, -50%);
        background-color:#fff;
        box-sizing:border-box;
        padding:5px;
    }
        .portrait__bubble--img img {
            width:100%;
            display:block;
            border-radius:50%
        }

@media only screen and (min-width:500px) { /* 500 = 400 / 0.8 */
    .portrait {
        width:400px;
        padding-top:400px;
    }
}

@media only screen and (max-width:320px) {
    .portrait__bubble {
        transform:translate(-50%, -50%);
        top:50%;
        left:50%;
        right:auto;
        bottom:auto;
    }
    .portrait__bubble--m {
        width:100%;
        height:100%;
    }
    .portrait__bubble--c {
        width:95%;
        height:95%;
    }
    .portrait__bubble--y {
        display:none;
    }
    .portrait__bubble--img {
        width:90%;
        height:90%;
        padding:2.5%;
    }
}

@media only screen and (max-width:150px) {
    /** /
    .portrait__bubble--m {
        display:none;
    }
    .portrait__bubble--c {
        width:100%;
        height:100%;
    }
    /*/
    .portrait__bubble--c {
...