JSFiddle - React, Tailwind, and code Playground

HTML

<div id="columns">
<div class="toparrow"></div>
<div id="seperator"></div>
<span class="topsarrow"></span>
<div id="seperator"></div>
<div class="botarrow"></div>
<div id="seperator"></div>
<span class="botsarrow"></span>
<div id="seperator"></div>
<div class="rightarrow"></div>
<div id="seperator"></div>
<span class="rightsarrow"></span>
<div id="seperator"></div>
<div class="leftarrow"></div>
<div id="seperator"></div>
<span class="leftsarrow"></span>
<div id="seperator"></div>
</div>

CSS

#seperator{
    margin:50px;
}
#columns{
    -webkit-column-count: 2;
    -webkit-column-gap: 50%;
    
}
.toparrow{
    width:0px;
    height:0px;
    border:50px solid;
    border-color:transparent transparent red transparent; 
}
.topsarrow{
    width:0px;
    height:0px;
    border:50px solid;
    border-color:transparent transparent red transparent;
               
}
.botarrow{
    width:0px;
    height:0px;
    border:50px solid;
    border-color:red transparent transparent transparent; 
    
}
.botsarrow{
    width:0px;
    height:0px;
    border:50px solid;
    border-color:red transparent transparent transparent; 
    
}.rightarrow{
    width:0px;
    height:0px;
    border:50px solid;
    border-color:transparent transparent transparent red ; 
    
}
.rightsarrow{
    width:0px;
    height:0px;
    border:50px solid;
    border-color:transparent transparent transparent red ; 
    
}
.leftarrow{
    width:0px;
    height:0px;
    border:50px solid;
    border-color:transparent red transparent transparent ; 
    
}
.leftsarrow{
    width:0px;
    height:0px;
    border:50px solid;
    border-color:transparent  red transparent transparent ; 
    
}