JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<div class="box">
</div>

<br><br><br>

<div class="arrow">
</div>

CSS

html{
    padding:50px
}

.box{
    background:red;
    height:40px;
    width:100px;
    position: relative;
}
.box:after{
    content:"";
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid green;
}

.arrow{
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid green;
    position:absolute;
}