JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="postCat">
    <ul>
        <li><a href="#">cool</a></li>
                <li><a href="#">cool</a></li>
                <li><a href="#">cool</a></li>
                <li><a href="#">cool</a></li>
                <li><a href="#">cool</a></li>
    </ul>
</div>

CSS

body {
    padding:10px;
}
.postCat li {
    display:inline-block;
    float:left;
    position:relative;
    margin-right:5px;
}
a {
    height:20px;
    line-height:22px;
    display:block;
    padding:0 10px;
    background:#3498db;
    color:white;
    margin-left:10px;
    font-size:14px;
    text-decoration: none;
}
a:before {
      content: "";
  float: left;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #3498db;
  border-bottom: 10px solid transparent;
    position:absolute;
    top:0;
    left:0px;
}
a:after{
  content: "";
  position: absolute;
  top: 9px;
  left: 7px;
  width: 3px;
  height: 3px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background:#fff;
}