JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
//<![CDATA[
$(window).load(function(){
// flexslider
$('.flexslider').flexslider({
animation: "slide"
});
});//]]> <script>
<div class="container">
<div class="flexslider">
<ul class="slides">

<li><img src="http://i68.tinypic.com/2hmlkbt.jpg" />
<p class="flex-caption"><a id="flextitle">Eyes, lips, face</a><span id="separator">—</span><span id="flexslidercategory">Makeup & beauty</span></p>
		
</li>

<li><img src="http://i67.tinypic.com/eprlms.jpg" />
<p class="flex-caption"><a id="flextitle">Portfolio</a><span id="separator">—</span><span id="flexslidercategory">Webdeveloping</span></p>
</li>
	
<li><img src="http://i65.tinypic.com/2j3seq1.jpg" />
<p class="flex-caption"><a id="flextitle">Reviews</a><span id="separator">—</span><span id="flexslidercategory">Products</span></p>
</li>

<li><img src="http://i63.tinypic.com/r1y15z.jpg" />
<p class="flex-caption"><a id="flextitle">Fifty shades</a><span id="separator">—</span><span id="flexslidercategory">Lifestyle</span></p>
</li>
</ul>
</div> <!-- End flexslider -->
</div> <!-- End container -->

CSS

/*
 * jQuery FlexSlider v2.6.1
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 and later license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 *
 */
/* ====================================================================================================================
 * FONT-FACE
 * ====================================================================================================================*/
@font-face {
  font-family: 'flexslider-icon';
  src: url('fonts/flexslider-icon.eot');
  src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* ====================================================================================================================
 * RESETS
 * ====================================================================================================================*/
body {
margin: 0px !important;
}

#container {
margin: 0;
padding: 0;
}

.flexslider .slides li {
position:relative !important;
}

.flex-caption {
font-family: "Source Sans Pro", "Helvetica", Arial, Sans-Serif;
text-transform: uppercase;
width: 40% !important;
padding: 0 !important;
top: 38% !important;
height: 35% !important;
padding: 0 !important;
background: #FFF !important;
color: #000 !important;
font-size: 140%;
line-height: 0px;
position: absolute;
left: 27% !important;
}

#separator {
display: table;
font-family: "Source Sans Pro", "Helvetica", Arial, Sans-Serif !important;
width: 100% !important;
background: #FFF;
font-size: 140%;
text-align: center;
color: #434343;
text-shadow: none;
}

#flextitle {
display: table;
padding: 7% 0 0 0;
margin: 0 0 4% 0;
width: 100% !important;
position: relative !important;
background: #FFF;
color:...

JavaScript

/*
 * jQuery FlexSlider v2.5.0
 * Copyright 2012 WooThemes
 * Contributing Author: Tyler Smith
 */
;
(function ($) {

  //FlexSlider: Object Instance
  $.flexslider = function(el, options) {
    var slider = $(el);

    // making variables public
    slider.vars = $.extend({}, $.flexslider.defaults, options);

    var namespace = slider.vars.namespace,
        msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture,
        touch = (( "ontouchstart" in window ) || msGesture || window.DocumentTouch && document instanceof DocumentTouch) && slider.vars.touch,
        // depricating this idea, as devices are being released with both of these events
        //eventType = (touch) ? "touchend" : "click",
        eventType = "click touchend MSPointerUp keyup",
        watchedEvent = "",
        watchedEventClearTimer,
        vertical = slider.vars.direction === "vertical",
        reverse = slider.vars.reverse,
        carousel = (slider.vars.itemWidth > 0),
        fade = slider.vars.animation === "fade",
        asNav = slider.vars.asNavFor !== "",
        methods = {},
        focused = true;

    // Store a reference to the slider object
    $.data(el, "flexslider", slider);

    // Private slider methods
    methods = {
      init: function() {
        slider.animating = false;
        // Get current slide and make sure it is a number
        slider.currentSlide = parseInt( ( slider.vars.startAt ? slider.vars.startAt : 0), 10 );
        if ( isNaN( slider.currentSlide ) ) { slider.currentSlide = 0; }
        slider.animatingTo = slider.currentSlide;
        slider.atEnd = (slider.currentSlide === 0 || slider.currentSlide === slider.last);
        slider.containerSelector = slider.vars.selector.substr(0,slider.vars.selector.search(' '));
        slider.slides = $(slider.vars.selector, slider);
        slider.container = $(slider.containerSelector, slider);
        slider.count = slider.slides.length;
        // SYNC:
       ...