JSFiddle - React, Tailwind, and code Playground
HTML
<div class="tag">Новости</div>
<div class="tag">Таймер</div>
<div class="tag">Код</div>
CSS
body {
padding: 3%;
}
.tag {
color: #fff;
font-size: 18px;
display: inline-block;
background-color: #123;
padding: 5px 10px;
position: relative;
margin: 0 2%;
}
.tag:before {
content: '';
display: block;
border-style: solid;
border-width: 15px 15px;
border-color: transparent #123 transparent transparent;
position: absolute;
top: 0;
right: 100%;
}
.tag:after {
content: '';
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
background-color: #fff;
top: 50%;
right: 100%;
transform: translateY(-50%);
}