JSFiddle - React, Tailwind, and code Playground

by CME64

HTML

<div>bla bla bla</div>
<div class="mustacheMan">
    <div class="eyes"></div>
</div>
<div class="yinyang"></div>

CSS

.mustacheMan{
    position:relative;
    border: 2px solid red;
    -webkit-border-radius:100%;
    width:200px;
    height:200px;
}

.mustacheMan:before{
    content:"";
    position:absolute;
    border:50px solid red;
    border-right:0;
    border-bottom:0;
    border-top:0;
    top:120px;
    left:100px;
    width:50px;
    height:50px;
    -webkit-border-radius: 100%/ 0 50% 0 100%;
}

.mustacheMan:after{
    content:"";
    position:absolute;
    border:50px solid red;
    border-left:0;
    border-bottom:0;
    border-top:0;
    top:120px;
    width:50px;
    height:50px;
    -webkit-border-radius: 100%/ 50% 0 100%;
}

.eyes{
    position:absolute;
    border: 8px solid red;
    width:0;
    height:0;
    left:60px;
    top:70px;
    -webkit-border-radius:100%;
}

.eyes:before{
    content:"";
    position:absolute;
    border: 8px solid red;
    width:0;
    height:0;
    left:50px;
    top:-8px;
    -webkit-border-radius:100%;
}

.yinyang{
    width:100px;
    height:0;
    position:relative;
    border-style:solid;
    border-color:black black white black ;
    border-width:2px 2px 100px 2px;
    -webkit-border-radius:100%;
}

.yinyang:before{
    content:"";
    position:absolute;
    background-color:white;
    border: 20px solid black;
    -webkit-border-radius: 100%;
    width:10px;
    height:10px;
    top:25px;
}

.yinyang:after{
    content:"";
    position:absolute;
    border: 20px solid white;
    background-color:black;
    -webkit-border-radius: 100%;
    width:10px;
    height:10px;
    left:50px;
    top:25px;
}