JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.3.0/jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.3.0/flexslider-min.css">
<!-- Flexslider thumbs -->
<section class="flex-control-thumbs">
    <div class="row">
        <div class="small-12 small-centered medium-9 columns">
            <div class="row">
                <div class="list-cell medium-4 columns">
                    <img src="http://emilium.com/projects/slider/images/image_1.jpg" />
                </div>
                <div class="list-cell medium-4 columns">
                    <img src="http://emilium.com/projects/slider/images/image_2.jpg" />
                </div>
                <div class="list-cell medium-4 columns">
                    <img src="http://emilium.com/projects/slider/images/image_3.jpg" />
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Flexslider thumbs end -->
<!-- Flexslider slides -->
<section class="flexslider">
    <div class="slider">
        <ul class="slides">
            <li class="list-cell--overlay"> <span class="close">Close</span>

                <div class="small-12 columns list-cell-overlay--content">
                    <div class="medium-2 columns list-cell-overlay--content--image">
                        <img src="http://emilium.com/projects/slider/images/image_1.jpg" />
                    </div>
                    <div class="medium-10 columns list-cell-overlay--content--description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur libero non eros dapibus, non mollis dolor egestas. Donec sagittis nec metus sit amet lacinia. Interdum et malesuada fames ac ante ipsum primis in...

CSS

body {
    position: relative;
    display: inline-block;
    width: 100%;
    background-color: #f0f0f0;
}
.flex-control-thumbs {
    position: absolute;
    top:50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}
.flex-control-thumbs .list-cell img {
    padding: 20px;
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
.flexslider {
    width: 80%;
    margin: initial;
}
.flexslider .close {
    position: absolute;
    top:0;
    right: 0;
    font-size:0;
}
.flexslider .close:after {
    position: absolute;
    top: 10px;
    right: 20px;
    content:'x';
    color: #999;
    font-size: 16px;
    font-family:"Helevetica", sans-serif;
    cursor:pointer;
}
.flexslider .close:hover:after {
    color: #000;
}
.flexslider li {
    padding: 32px 0;
    position: relative;
}
.flexslider li p {
    font-size:14px;
    color: #999999;
}
.flex-direction-nav {
    display: none;
}

JavaScript

var Slider = {

    flexsliderInit: function () {

        $('.slider').flexslider({
            controlsContainer: ".flex-control-thumbs",
            animation: 'slide',
            direction: "horizontal",
            animationLoop: false,
            slideshow: false,
            controlNav: true,
            directionNav: true,
            manualControls: ".flex-control-thumbs .list-cell",
            start: function (slider) {

                var $flexslider = $('.flexslider');
                $flexslider.hide();

                var $thumbs = $('.list-cell');
                $('.list-cell').each(function () {
                    $(this).on('click', function (e) {
                        $flexslider.show();
                        e.preventDefault();
                        $(window).trigger('resize');
                        $slideItems = $('.list-cell--overlay');
                        $slideItems.each(function () {
                            var $item = $(this),
                                $close = $item.find('.close');

                            $close.on('click', function () {
                                $flexslider.hide();
                            });
                        });
                    });
                });
            }


        });
    },

    init: function () {
        // flexslider
        this.flexsliderInit();
    }
};

$(function () {
    Slider.init();
});