JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="slider8">
  <div class="slide"><a href="#">Sell My</a></div>
  <div class="slide"><a href="#">Fix My</a></div>
  <div class="slide"><a href="#">Buy A</a></div>
</div>

CSS

.bxslider li {
    height: 60px
}

.bx-viewport {
    height: 80px !important;
}

.active-slide a {
    font-weight: bold;
}

.bx-prev {
    left: -50px !important;
}

.bx-next {
    right: -50px !important;
}

JavaScript

var slider = $('.slider8').bxSlider({
    mode: 'vertical',
    slideWidth: 300,
    minSlides: 3,
    moveSlides: 1,
    slideMargin: 10,
    onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
    console.log(currentSlideHtmlObject);
    $('.active-slide').removeClass('active-slide');
    $('.slider8>div:not(.bx-clone)').eq(currentSlideHtmlObject + 1).addClass('active-slide')
},
onSliderLoad: function () {
    $('.slider8>div:not(.bx-clone)').eq(1).addClass('active-slide')
}
});