JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sb-body">
    <a id="sb-nav-previous" class="sb-bignav" title="Previous" onclick="Shadowbox.previous()"></a>
    <a id="sb-nav-next" class="sb-bignav" title="Next" onclick="Shadowbox.next()"></a>
    
    <div id="sb-body-inner">
        <img style="position: absolute;" src="http://www.element17.com/gallery/01_CONSTRUCTS/Shear.jpg" id="sb-player" height="405" width="609">
    </div>
</div>

CSS

#sb-nav-next {
        right:0;
        background:url('http://www.element17.com/images/nav-right.png') center center no-repeat;
    }
    
    #sb-nav-previous {
        left:0;
        background:url('http://www.element17.com/images/nav-left.png') center center no-repeat;
    }
   
    #sb-body:hover .sb-bignav {
        opacity:0.5;
        -webkit-opacity:0.5;
        -moz-opacity:0.5;
    }

    #sb-body .sb-bignav:hover {
        opacity:1.0;
        -webkit-opacity:1.0;
        -moz-opacity:1.0;
    }

    .sb-bignav {
        cursor:pointer;
        position:absolute;
        width:200px;
        height:100%;
        top:0;
        z-index:400;
        opacity:0;
        -webkit-opacity:0;
        -moz-opacity:0;
        transition: opacity .125s ease-in;
        -webkit-transition: opacity .125s ease-in;
        -moz-transition: opacity .125s ease-in;
    }