JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<div class="container">
<div class="flexslider">
    <ul class="slides">
        <li><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /></li>
        <li><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" /></li>
        <li><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" /></li>
        <li><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" /></li>
    </ul>
 </div>
</div>

CSS

* { margin: 0; padding: 0; }
HTML, BODY {    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
BODY { background-color: white; padding: 10px 0; }

.flexslider {padding: 0 100px; margin: 0 auto}
.flex-viewport {overflow: visible !important}
IMG { opacity: 0.3;  } /* transition: opacity 300ms linear; */
.flex-active-slide IMG { opacity:1; }

JavaScript

// flexslider
    $('.flexslider').flexslider({
	    animation: "slide",
      controlNav: false
		});