JSFiddle - React, Tailwind, and code Playground

by Darko

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid nopadding">
  <div class="row equalize">
    <div class="col-sm-6 wt-bg-one">
    </div>
    <div class="col-sm-6 c-light-blue">
      <div class="inner">
        <h3>TITLE</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          <br>sed do eiusmod tempor incididunt
          <br>ut labore et dolore magna aliqua</p>
      </div>
    </div>
  </div>
  <div class="row equalize">
    <div class="col-sm-6 col-sm-push-6 wt-bg-two"></div>
    <div class="col-sm-6 col-sm-pull-6 c-dark-blue">
      <div class="inner text-right">
        <h3>TITLE</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          <br>sed do eiusmod tempor incididunt
          <br>ut labore et dolore magna aliqua</p>
      </div>
    </div>
  </div>
  <div class="row equalize">
    <div class="col-sm-6 wt-bg-three"></div>
    <div class="col-sm-6 m-light-blue">
      <div class="inner">
        <h3>TITLE</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          <br>sed do eiusmod tempor incididunt
          <br>ut labore et dolore magna aliqua</p>
      </div>
    </div>
  </div>
  <div class="row equalize">
    <div class="col-sm-6 col-sm-push-6 wt-bg-four"></div>
    <div class="col-sm-6 col-sm-pull-6 m-dark-blue">
      <div class="inner text-right">
        <h3>TITLE</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          <br>sed do eiusmod tempor incididunt
          <br>ut labore et dolore magna aliqua</p>
      </div>
    </div>
  </div>
</div>

CSS

.nopadding {
    padding: 0;
  }
  
  .inner {
    padding: 50px 80px;
    display: inline-block;
    width: 100%;
  }
  
  .c-light-blue {
    background-color: #0195dd;
    color: #ffffff;
  }
  
  .c-dark-blue {
    background-color: #064f86;
    color: #ffffff;
  }
  
  .m-light-blue {
    background-color: #008ecf;
    color: #ffffff;
  }
  
  .m-dark-blue {
    background-color: #003258;
    color: #ffffff;
  }
  /* bootsrtap columns bootstrap columns overrides */
  
  .row.equalize {
    display: table;
    width: 100%;
    margin: 0;
  }
  
  .equalize [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: middle;
    height: 400px;
  }
  /* background images */
  
  .wt-bg-one {
    background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/280h/K7NTJJB7MZ.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .wt-bg-two {
    background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/280h/1FA6SEYFHF.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .wt-bg-three {
    background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/280h/W35FN4QNGR.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .wt-bg-four {
    background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/280h/M0KT5WZEE0.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  @media (max-width:480px) {
    .inner {
      padding: 50px 20px;
    }
  }
  
  @media (max-width:768px) {
    .row.equalize {
      display: block;
      width: auto;
      margin: 0;
    }
    .equalize [class*="col-"],
    .inner.text-right,
    .inner.text-left {
      float: none;
      display: block;
      height: auto;
      text-align: center !important;
      left: 0;
      width: 100%;
    }
    .wt-bg-one,
  ...