JSFiddle - React, Tailwind, and code Playground

by surfine

HTML

<div class="sbWhite sbLf pf">
    <div class="sbWhiteWrap ps">
        <div class="face">
            <div class="fcMouth"></div>
        </div>
    </div>
</div>
<div class="face fcXL" style="background: #bbb">
    <div class="fcMouth" style="background: #eee"></div>
</div>

CSS

body {
    background: #eee;
    display: block;
}
.ps {
    position: relative;
}
.pf {
    position: fixed;
}
.sbWhite {
    height: 100%;
    width: 250px;
    background: #fff;
    top: 0;
    left: 0;
    border-right: 1px solid #ccc;
    box-shadow: 0 1px 3px 2px rgba(0, 0, 0, .1);
    display: inline-block;
    z-index: 3;
}
.sbWhiteWrap {
    top: 50px;
}
.face {
    width: 120px;
    height: 120px;
    position: relative;
    background: #eee;
    border-radius: 50%;
    margin: 0 auto;
}
.face:before {
    content:"";
    width: 83.33%;
    height: 20%;
    background: inherit;
    position: absolute;
    bottom: 40%;
    left: 8.33%;
    z-index: 2;
}
.fcMouth {
    content:"";
    width: 83.33%;
    height: 41.67%;
    background: #fff;
    position: relative;
    top: 50%;
    /*-webkit-border-radius: 0 0 150% 150%;
       -moz-border-radius: 0 0 150% 150%;*/
    border-radius: 0 0 500px 500px;
    margin: 0 auto;
    display: block;
    z-index: 1;
}
.fcXL {
    height: 300px;
    width: 300px;
    margin: 0 auto;
}