JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<div class='aaa'>
<div class="arrow">
    
</div>
<div class="arrow">
    
</div>
<div class="arrow">
    
</div>
</divdiv>

CSS

.aaa{
  display: 
}
.arrow {
    background : gray;
    width : 250px;
    height : 50px;
    position : relative;
    display: flex}

.arrow:after {
    content : '';
    display : block;
    position : absolute;
    right: -20px;
    top : 0;
    width: 0;
    height: 0;
    
    border-style: solid;
    border-width: 25px 0 25px 20px;
    border-color: transparent transparent transparent #007bff;
}