JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.0/js/swiper.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.0/css/swiper.min.css">
<section id="portfolio">
  <div class="col-lg-5 col-sm-5" id="portfolio-left">
    <div id="portfolio-title">
      <h2>Work</h2>
    </div>
  </div>

  <div class="col-lg-7 col-sm-7" id="portfolio-right">
    <div class="swiper-container swiper-container-h">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="swiper-container swiper-container-v">
            <div class="swiper-wrapper">
              <div class="swiper-slide goldBG">
                <div class="row addMargin">
                  <div class="col-md-5 col-md-offset-1 vertical-center inner">
                    <div class="content-holder-l">
                      <p>French</p>
                      <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
                    </div>
                  </div>
                </div>
                <div class="row addMargin">
                  <div class="col-md-5 col-md-offset-1 vertical-center inner">
                    <div class="content-holder-l">
                      <p>French</p>
                      <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
                    </div>
                  </div>
                </div>
                <div class="row addMargin">
                  <div class="col-md-5 col-md-offset-1 vertical-center inner">
                    <div class="content-holder-l">
                      <p>French</p>
                      <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
                ...

CSS

#portfolio {
  height: 100vh;
}

#portfolio-left {
    background: #6bbea5 none repeat scroll 0 0;
    height: 100%;
}

#portfolio-right {
    height: 100%;
    padding: 0;
}

.swiper-container {
    color: #000;
    height: 100%;
    position: relative;
}

.goldBG {
   background: #fabc2f;
}

JavaScript

$(function() {
     var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true
    });
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        freeMode: true,
        autoHeight: true,
        grabCursor: true
    });
});