JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/bxslider/4.1.1/plugins/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.css">
<script src="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.js"></script>
<!-- The main images -->
<ul id="bxslider">
  <li><img src="http://dummyimage.com/600x400/000/fff.png" alt="">
    <div class="content">
      <h3>MGMT</h3>
      <h4>Congratulations</h4>
      <p>Recording the follow-up to your critically-acclaimed debut album has to be a nerve-wracking affair. As a band, do you go with the same sound/formula you used on the first record? On MGMT’s sophomore album Congratulations, they successfully manage
        to do both.</p>
    </div>
    <div class="clear"></div>
  </li>
  <li><img src="http://dummyimage.com/600x400/000/ff0099.png" alt=""></li>
  <li><img src="http://dummyimage.com/600x400/000/ff0000.png" alt=""></li>
  <li><img src="http://dummyimage.com/600x400/000/fff000.png" alt=""></li>
  <li><img src="http://dummyimage.com/600x400/000/fff.png" alt=""></li>
  <li><img src="http://dummyimage.com/600x400/000/fff.png" alt=""></li>
</ul>

<!-- The thumbnails -->
<ul id="bxslider-pager">
  <li data-slideIndex="0">
    <a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a>
  </li>
  <li data-slideIndex="1">
    <a href=""><img src="http://dummyimage.com/200x200/000/ff0099.png"></a>
  </li>
  <li data-slideIndex="2">
    <a href=""><img src="http://dummyimage.com/200x200/000/ff0000.png"></a>
  </li>
  <li data-slideIndex="3">
    <a href=""><img src="http://dummyimage.com/200x200/000/fff000.png"></a>
  </li>
  <li data-slideIndex="4">
    <a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a>
  </li>
  <li data-slideIndex="5">
    <a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a>
  </li>
</ul>

CSS

.clear {
  clear: both;
}

#bxslider {
  overflow: hidden;
  width: 100%;
}

#bxslider li {
  list-style: none;
  width: 60%;
}

#bxslider .content {
  float: left;
  width: 30%;
  padding-left: 21px;
}

#bxslider li img {
  float: left;
}

JavaScript

$(function(){
$('#bxslider').bxSlider();
})