JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<div class='np_bubbleOne'>
    <div class='np_bubbleBorder'></div>
    <div class='np_bubbleTwo'></div>
</div>

CSS

.np_bubbleOne {
    position:relative;
    height:40px;
    width:60px;
    border-radius: 50px / 32px;
    background-color: black;
}
.np_bubbleOne:before {
    content:"";
    position:absolute;
    bottom:-10px;
    left:10px;
    border:0;
    border-left-width:15px;
    border-bottom-width:25px;    
    border-style:solid;
    border-color:transparent black;
    -webkit-transform: rotate(40deg);
    -moz-transform:  rotate(40deg);
}
.np_bubbleBorder {
    position:relative;
    height:40px;
    width:60px;
    top: 2px;
    left: 4px;
    border-radius: 50px / 32px;
    background-color: white;
    z-index : -1;
}
.np_bubbleTwo {
    position:relative;
    left : 35px;
    top : -25px;
    height:30px;
    width:50px;
    border-radius: 50px / 32px;
    background-color: black;
    z-index : -2;
}
.np_bubbleTwo:before {
    content:"";
    position:absolute;
    bottom:-12px;
    left:20px;
    border:0;
    border-right-width:20px;
    border-bottom-width:35px;    
    border-style:solid;
    border-color:transparent black;
    -webkit-transform: rotate(-30deg);
    -moz-transform:  rotate(-30deg);
}

JavaScript

//TheNounProject - Blog by Amit Gharat