JSFiddle - React, Tailwind, and code Playground

by Harisankaran Parameswaran

HTML

<div>Home<span class='right'>&times;</span></div>
<div>LongTest<span class='right'>&times;</span></div>
<div>Very Long Demo<span class='right'>&times;</span></div>
<div>Sample<span class='right'>&times;</span></div>

CSS

div {
    background: #E8EDF2;
    position:relative;
    width: auto;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin: 20px;
    padding-left: 15px;
    border-radius: 4px;
    color: #888DA3;
    border: 1px solid #C7D2DB;
}
div:after { /* the arrow on left side positioned using left property */
    position: absolute;
    content: '';
    height: 14px; width: 14px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #E8EDF2;
    border: 1px solid #C7D2DB;
    border-color: transparent transparent #C7D2DB #C7D2DB;
    left: -6px;
    top: 2px;
}
div:before{ /* the circle on the left */
    position: absolute;
    content: '';
    height: 4px; width: 4px;
    border-radius: 50%;
    border: 1px solid #C7D2DB;
    background-color: white;
    left: 0px;
    top: 7px;
    z-index: 2;
}
.right{ /* the x mark at the right */
    text-align: right;
    margin: 0px 4px;
}