JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="tab-header" id="bx-pager">
    <a data-slide-index="0" href="#">tab-1</a>
    <a data-slide-index="1" href="#">tab-2</a>
    <a data-slide-index="2" href="#">tab-3</a>
</div>

<div class="tab-body">
    <ul class="bxslider">
        <li>tab-1</li>
        <li>tab-2</li>
        <li>tab-3</li>
    </ul>
</div>

SCSS

body {
    margin: 50px;
}

.tab-body {
    display: block;
    width: 50%;
}

.tab-header {
    .active {
        background: yellow;
    }
}

JavaScript

$('.bxslider').bxSlider({
    pagerCustom: '#bx-pager',
    controls: false
});