JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li><a href="#" class="btn">Button 1</a></li>
<li><a href="#" class="btn">A really long button</a></li>
<li><a href="#" class="btn">Size Chart</a></li>
</ul>
CSS
.btn{
background: rgba(0,167,253,0.5);
border-top-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
display: inline-block;
padding: 5px 10px;
border: 1px solid #0093df;
position: relative;
font-size: 1em;
font-family: Arial, sans-serif;
text-decoration: none;
}
.btn:after, .btn:before {
content: '';
position: absolute;
right: -1px;
bottom: -1px;
width: 0;
height: 0;
border: 4px solid white;
border-color: transparent white white transparent;
z-index: 2;
}
.btn:before {
border: 5px solid #0093df;
border-color: transparent #0093df #0093df transparent;
z-index: 1;
}