JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="img-show">
                <div class="image01 slide">
                    <img src="http://classes.yale.edu/fractals/panorama/nature/Rivers/RiversS.gif" class="img-responsive" />
                </div>
                <div class="image02 slide">
                    <img src="http://shalomisraeltours.com/wp-content/uploads/2011/03/Amud-Stream-Nature-Reserve-200x100.jpg" class="img-responsive" />
                </div>
                <div class="image03 slide">
                    <img src="http://naturepreserves.ohiodnr.gov/portals/dnap/WebSitesCreative_PostIt/27763/ec1ef173-8b35-414c-a8c3-ff06d141590e.jpg" class="img-responsive" />
                </div>
            </div>
        </div>
        <div class="col-xs-6 img-ico">
            <div class="img01 col-xs-4">
                <img src="http://www.codeproject.com/KB/buttons/netimagebutton/ExampleButton.png" width="43" height="31" />Design</div>
            <div class="img02 col-xs-4">
                <img src="http://getsafesea.com/images/submit-button.png" width="43" height="31" />Design</div>
            <div class="img03 col-xs-4">
                <img src="http://softwaresupportserviceshost.com/caaconnect/wp-content/uploads/sites/2/2013/06/login-button.png" width="43" height="31" />Design</div>
            <div class="clearfix"></div>
            <div class="content">
                <div class="contentshow c1">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</div>
               ...

CSS

.slide {
    padding-top: 30px;
}
.img01, .img02, .img03 {
    cursor: pointer;
}

JavaScript

$(".c2").css("display", "none");
$(".c3").css("display", "none");
$(".image03").css("display", "none");
$(".image02").css("display", "none");

$(document).ready(function () {
    Reload('.image01','.c1'); // first load
    
    $('.img01').click(function () {
        Reload('.image01','.c1');
    });

    $('.img02').click(function () {
        Reload('.image02','.c2');        
    });
    $('.img03').click(function () {
        Reload('.image03','.c3');
    });
});

function Reload(imageClass, contentClass) {
    $(".c1").fadeOut();
    $(".c2").fadeOut();
    $(".c3").fadeOut();
    $(".image01").fadeOut("slow", function () {
        $(".image02").fadeOut("slow", function () {
            $(".image03").fadeOut("slow", function () {
                $(imageClass).show("slide", {
                    direction: "left"
                }, 500);
                $(contentClass).show("slide", {
                    direction: "right"
                }, 500);
            });
        });
    });
}