JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div class="arrow full-arrow"></div><br/>
<div class="arrow down-arrow"></div><br/>
<div class="arrow up-arrow"></div><br/>
<div class="arrow left-arrow"></div><br/>
<div class="arrow right-arrow"></div><br/>

CSS

div.arrow { 
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px;
}

.full-arrow
{
    border-color: #468DD5 #B6DBFF #F84747 #484A4D;
}

.down-arrow
{
    border-color: #468DD5 transparent transparent transparent;
}

.up-arrow
{
    border-color: transparent transparent #F84747 transparent;
}

.left-arrow
{
    border-color: transparent #B6DBFF transparent transparent;
    
}

.right-arrow
{
    border-color: transparent transparent transparent #484A4D;
}