JSFiddle - React, Tailwind, and code Playground

by Saran

HTML

<div>3 ppl<br>€85</div>

CSS

div {
    background: deeppink;
    height: auto;
    width: 40px;
    position: relative;
    text-align: center;
    font: 600 13px sans-serif;
    color: #fff;
    line-height: 27px;
    border: 0;
    padding-bottom: 15px;
}

div:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    height: 0;
    width: 0;
    border: solid 20px deeppink;
    border-bottom-color: transparent;
}

div:hover {
    background: purple;
}

div:hover:after {
    border-color: purple;
    border-bottom-color: transparent;
}