JSFiddle - React, Tailwind, and code Playground

by JordanBlount

HTML

<a href="#" class="like"><span>15</span></a>

CSS

a.like{
position:absolute;
height:0;
width:0;
top: 25px;
border-top: 15px solid #f76464;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
color: #fff;
text-decoration:none;
    font-size:12px;
    font-family:Arial;
}
a.like span{
position:absolute;
top:-34px;
width: 30px;
margin-left:-20px;
text-align:center;
z-index:1;
padding: 10px 3px;
border-radius: 50%;
border: 2px solid #f76464;
}
a.like::before{
content:"";
position:absolute;
left:-15px;
top:-26px;
width:16px;
height:16px;
background: #f76464;
webkit-border-radius: 50%;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 50%;
-moz-border-radius-bottomright: 0;
border-radius: 50%;
border-bottom-right-radius: 0;
}
a.like::after{
content:"";
position:absolute;
right:-15px;
top:-26px;
width:16px;
height:16px;
background: #f76464;
webkit-border-radius: 50%;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 50%;
-moz-border-radius-bottomleft: 0;
border-radius: 50%;
border-bottom-left-radius: 0;
}