JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class='child'></div>
    
</div>

<div class="arrow_box arrow_box2">
    <span>Ahoj</span> 
</div>

CSS

.parent{width:100px; height:100px; background:#f0f;}
.child{width:50px; height:50px; background:#ff0;}
.parent:hover .child:after{display:block; width:50px; height:50px; background:#f00; content:""}


.arrow_box {
    position: relative;
    width: 300px;
    height: 300px;
    flex: 1;
    padding: 10px;
    margin: 20px; 
}
.arrow_box:after {
    left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-width: 25px;
	margin-top: -25px;
}
.arrow_box2 {
    background: #ddd;
}
.arrow_box2:after {
    border-color: rgba(85, 213, 119, 0);
	border-left-color: #ddd;
        z-index: 10; 
}


.arrow_box2:hover, .arrow_box2:hover .arrow_box2:after {
      display:block;
      content:"";
  background: #EDDC0D; 
   color: #FFF;
  border-left-color: #EDDC0D; 
  border-color: #EDDC0D; 
    border-color: rgba(0, 0, 0, 0);
	border-left-color: #000; 
}
.arrow_box2:hover::after{
	border-left-color: #f0f;
        z-index: 10; 

}