JSFiddle - React, Tailwind, and code Playground

HTML

<div class="arrow">
    <p id="arrow-text">some text here</p>
</div>
<div class="bx-controls-direction">
    <button class="bx-prev">Prev</button>
    <button class="bx-next">Next</button>
</div>

CSS

.arrow {

            background-color: #817777;
            position: absolute;
            bottom: 60%;
            right: 60%;
            left: 20%;
            z-index: 1000;
        }
        .arrow:before {
            right: 100%;
            bottom: 0px;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-width: 15px;
            border-bottom: 30px solid #817777;
            border-left: 30px solid transparent;
        }
        .arrow:after {
            left: 100%;
            bottom: 0px;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-width: 15px;
            border-bottom: 30px solid #817777;
            border-right: 30px solid transparent;
        }
        .no-after:after{content:"";}
        .no-before:after{content:"";}
        .arrow > p {
            margin: 20px;
        }

JavaScript

function setAfter() {
                $('.arrow').removeClass('no-after');
                $('.arrow').addClass('no-before');
            }
            function setBefore() {
                $('.arrow').removeClass('no-before');
                $('.arrow').addClass('no-after');
            }

            $('.bx-prev').click(function() {
                setAfter();
            });
            $('.bx-next').click(function() {
                setBefore();
            });