JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<div class="outcome">

<div class="rightarrowdiv">
This is a test
</div>

<div class="uparrowdiv">
This is a test
</div>
    
</div>

CSS

.rightarrowdiv {
width:200px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: red;
color:white;
padding:15px;
position:relative;
word-wrap:break-word;
margin-bottom:2em;
display: inline
}


.rightarrowdiv:after{ /*arrow added to rightarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:21px;
left:100%; /*should be set to 100% */
width:0;
height:0;
border-color: transparent transparent transparent red; /*border color should be same as div div background color*/
border-style: solid;
border-width: 7px;
z-index: 999
}

.uparrowdiv {
width:200px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: black;
color:white;
padding:15px;
position:relative;
word-wrap:break-word;
margin-bottom:2em;
display: inline;    
}