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="banner1">
    <div class="slider-wrapper">
    <div class="slider1">
      <div class="slide"><span><img src="http://placehold.it/640x320&text=Slide 1">
        <img src="http://placehold.it/320x160">
        <img src="http://placehold.it/320x160"></span>
        </div>
      <div class="slide"><span><img src="http://placehold.it/640x320">
        <img src="http://placehold.it/320x160">
        <img src="http://placehold.it/320x160"></span>
        </div>
      <div class="slide"><span><img src="http://placehold.it/640x320">
        <img src="http://placehold.it/320x160">
        <img src="http://placehold.it/320x160"></span>
        </div>
        <div class="slide"><span><img src="http://placehold.it/640x320">
        <img src="http://placehold.it/320x160">
        <img src="http://placehold.it/320x160"></span>
        </div>
        <div class="slide"><span><img src="http://placehold.it/640x320">
        <img src="http://placehold.it/320x160">
        <img src="http://placehold.it/320x160"></span>
        </div>

    </div>
    </div>
</div>
<div class="banner2">
    <div class="slider-wrapper">
    <div class="slider2">
      <div class="slide"><img src="http://placehold.it/320x160"></div>
      <div class="slide"><img src="http://placehold.it/320x160"></div>
      <div class="slide"><img src="http://placehold.it/320x160"></div>
      <div class="slide"><img src="http://placehold.it/320x160"></div>
      <div class="slide"><img src="http://placehold.it/320x160"></div>
      <div class="slide"><img src="http://placehold.it/320x160"></div>
      <div class="slide"><img src="http://placehold.it/320x160"></div>
      <div class="slide"><img src="http://placehold.it/320x160"></div>
      <div class="slide"><img src="http://placehold.it/320x160"></div>
    </div>
    </div>
</div>

CSS

.banner1{
	width:100%;
	overflow:hidden;
	max-height:370px;
	margin-bottom:30px;
}
.banner2{
	width:100%;
	overflow:hidden;

}
.slider-wrapper{
	margin-bottom:20px;
	margin: 0 auto;
    max-width: 960px;
}
.slider1 img, slider2 img{
	float:left;
}
.bx-viewport{
	overflow:visible !important;
}

JavaScript

$(document).ready(function(){
  $('.slider1').bxSlider({
	  slideWidth: 960,
    minSlides: 1,
    maxSlides: 8,
    slideMargin: 0

  });
  $('.slider2').bxSlider({
	  slideWidth: 320,
    minSlides: 1,
    maxSlides: 8,
    slideMargin: 0
  });
});