JSFiddle - React, Tailwind, and code Playground

by tmyie

HTML

left:

<div class="arrow_container">
    <div class="left_arrow_head"></div>
    <div class="arrow_body"></div>
</div>


right: 

<div class="arrow_container">
    <div class="right_arrow_head"></div>
    <div class="arrow_body"></div>
</div>

CSS

.arrow_container {
    
    width: 35px;
    height: 10px;
}

.left_arrow_head {
    
    border-left: 1px solid #00207c;
    border-bottom: 1px solid #00207c;
    height:6px;
    width: 6px;
    transform: rotate(45deg);
-ms-transform: rotate(45deg); 
    position: relative;
    left: 0;
-webkit-transform: rotate(45deg); 
    
}

.right_arrow_head {
    
    border-right: 1px solid red;
    border-top: 1px solid #00207c;
    height:6px;
    width: 6px;
    transform: rotate(45deg);
-ms-transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
    left: 27px;
    position: relative;
}


.arrow_body {
    
    border-top: 1px solid #00207c;
    position: relative;
    bottom: 4px;
    left: -1px;
}