JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

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 class="content">
        <p>Content here</p>
        <p>Content here</p>
        <p>Content here</p>
    </div>
</div>

CSS

.container {
    overflow: hidden;
    width: 100%
}
.flexslider {
    max-width: 800px;
    width: 800px;
    margin: 0 auto
}
.content {
    background: #f2f2f2;
    max-width: 800px;
    display: block;
    margin: 0 auto
}
.flex-viewport {
    overflow: visible !important
}
.slides li {
    width: 100%!important;
    max-width: 800px!important;
}
.slides li img {
    width: 100%!important;
    margin: auto;
}

JavaScript

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