JSFiddle - React, Tailwind, and code Playground

by lparcerisa

HTML

<div class="bird" href="#">145</div>
<div class="bird" href="#">159</div>

CSS

.bird {
    background: yellow;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    line-height:60px;
    text-align:center;
    position:relative;
    margin-top:30px;
}
.bird:before {
    background: blue;
    position:absolute;
    top:-20px;
    left: 10px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    line-height:40px;
    text-align:center;
    content: "0 0";
    font-weight:bold;
    color: white;
}

.bird:after
{
    position:absolute;
    bottom:0px;
    left:0px;
    width: 45px;
    content: '';
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #007bff transparent;
}