JSFiddle - React, Tailwind, and code Playground

by Hidayat Rifan

HTML

<body>
    <div class='kepala'>
        <div class='mata1'></div>
        <div class='mata2'></div>
        <div class='mulut'></div>
        <div class='lidah'></div>
    </div>
</body>

CSS

body {
    padding:50px
}
.kepala {
    width:300px;
    height:300px;
    border-radius:50%;
    background-color: #FC0000;
    position:relative;
    border:10px solid
}
.mata1, .mata2 {
    width:50px;
    height:50px;
    border-radius:50%;
    background-color:#000;
    position:absolute;
    top:30%
}
.mata1 {
    left:60%;
}
.mata2 {
    right:60%;
}
.mulut {
    height:10px;
    width:180px;
    background-color:#000;
    position:absolute;
    top:60%;
    left:20%
}
.lidah {
    height: 58px;
    width: 180px;
    background-color: #000;
    position: absolute;
    top: 63%;
    left: 20%;
    border-radius: 0 0 150px 150px;
}