JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drawer">
    <div class="labels" style="overflow:hidden;">
        <ul style="width:850px; ">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="nav">
        <a href="#" class="prev off"><span></span></a>
        <a href="#" class="next"><span></span></a>
     </div>
</div>

CSS

div.drawer {
    background:#ccc;
	position: relative;
	bottom:0;
	box-sizing:border-box;
	padding:0;
	/*height: 125px;*/
}

.drawer .nav {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width:100%;
	height:100%;
	z-index:2;
	pointer-events:none;
}

.drawer .nav:after {
    clear:both;
}

.drawer .nav .prev,
.drawer .nav .next {
	position: relative;
	display: block;
	width:50px;
	height:100%;
	float:left;
	pointer-events:auto;
	background:-webkit-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%);
	background:linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%);
    z-index:3;
}

.drawer .nav .next{
	float:right;
	background:-webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%);
	background:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%);
}

.drawer .nav .prev span,
.drawer .nav .next span {
	display: block;
	position: relative;
	background:#4d4d4d;
	width:50px;
	height:50px;
	top:50%;
	margin-top:-25px;
}

.drawer .nav .prev.off span,
.drawer .nav .next.off span {
	background:#808080;
}

.drawer .nav .next span:after,
.drawer .nav .next span:before {
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.drawer .nav .next span:after {
	border-color: rgba(0, 0, 0, 0);
	border-left-color: #4d4d4d;
	border-width: 18px;
	top: 50%;
	margin-left:-15px;
	margin-top: -18px;
}

.drawer .nav .next.off span:after {
	border-left-color: #808080;
}

.drawer .nav .next span:before {
	border-color: rgba(0, 0, 0, 0);
	border-left-color: white;
	border-width: 18px;
	top: 50%;
	margin-left:-8px;
	margin-top: -18px;
}

.drawer .nav .prev span:after,
.drawer .nav .prev span:before {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.drawer .nav .prev span:after {
	border-color: rgba(0, 0, 0, 0);
	border-right-color: #4d4d4d;
	border-width: 18px;
	top:...