JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sb-body">
    <a id="sb-nav-previous" class="sb-bignav" title="Previous" onclick="Shadowbox.previous()">               
        <span class="sb-img-next"></span>              
        <span class="sb-img-previous"></span>
    </a> 
    <a id="sb-nav-next" class="sb-bignav" title="Next" onclick="Shadowbox.next()">              
        <span class="sb-img-previous"></span>              
        <span class="sb-img-next"></span>
    </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;
    }
    
    #sb-nav-previous {
        left:0;
    }
    
    #sb-body:hover .sb-bignav {
        opacity:0.5;
        -webkit-opacity:0.5;
        -moz-opacity:0.5;
    }

    #sb-nav-next:hover #sb-nav-previous, 
    #sb-nav-previous:hover #sb-nav-next {
        opacity:0;
        -webkit-opacity:0;
        -moz-opacity: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;
    }

    .sb-bignav:hover {
        opacity:1.0;
        -webkit-opacity:1.0;
        -moz-opacity:1.0;
}
.sb-img-previous{
    background:url('http://www.element17.com/images/nav-left.png') center center no-repeat;
}
.sb-img-next{    
    background:url('http://www.element17.com/images/nav-right.png') center center no-repeat;
}
.sb-img-previous,.sb-img-next{
    position: fixed;
    width: 200px;
    height:100%;      
}
.sb-img-previous{
    left:0;
}
.sb-img-next{
    right:0;
}
#sb-nav-previous .sb-img-next{
    right:0;
    pointer-events: none;
}
#sb-nav-next .sb-img-previous{
    left:0;
    pointer-events: none;
}
#sb-nav-previous .sb-img-next,
#sb-nav-next .sb-img-previous,
#sb-nav-previous:hover .sb-img-previous,
#sb-nav-next:hover .sb-img-next{
    opacity: 1;
}
#sb-nav-previous .sb-img-previous,
#sb-nav-next .sb-img-next,
#sb-nav-previous:hover .sb-img-next,
#sb-nav-next:hover .sb-img-previous{
    opacity: 0;
}