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>
<link rel="stylesheet" href="http://bxslider.com/css/styles.css">
<ul class="bxslider">
  <li><img src="http://bxslider.com/images/home_slides/houses.jpg" /></li><li><img src="http://bxslider.com/images/home_slides/houses.jpg" /></li><li><img src="http://bxslider.com/images/home_slides/houses.jpg" /></li>
</ul>

CSS

.bx-wrapper, .bx-viewport {
    height: 220px !important;
}

.bx-wrapper img {
    max-width: 1000px !important;
    position: relative;
    left: 50%;
    margin: 0 0 0 -500px;
}

JavaScript

$('.bxslider').bxSlider({
		auto: true,
		mode: 'fade'
	});