JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="box">        
        <a id="anchor" href=""><div id="internalArrow"></div></a>        
    </div>
</div>

CSS

#box
     {                  
        background-color: rgb(217, 9, 122);
        height: 50px;
        width: 50px;  

        position: absolute;               
        top:50%

    }

    #box:after {
        content: ' ';
        height: 0;
        position: absolute;
        width: 0;        

        border: 20px solid transparent; 
        border-right-color: #ffffff;

        top: 50%;
        left: 10%;
        margin-left:-15px;
        margin-top:-20px;
    }      

    #internalArrow
    {
        width:0;
        height:0;
        position:absolute;

        border: 20px solid transparent; 
        border-right-color: rgb(217, 9, 122);       

        top: 50%;
        left: 10%;
        margin-left:-5px;
        margin-top:-20px;      
        z-index:100;            

    }

    #box:hover #internalArrow
    {
        background-color:rgb(189, 64, 132);
    }

    #wrapper
    {
        height:600px;   
        width:50px;
        background-color:#ffffff;
        opacity:0.9;
    }