JSFiddle - React, Tailwind, and code Playground

by Petar Pilipovic

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <div class="container">
        <div class="row">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 first_image lazy">
              </div> 
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 second_image lazy">
              </div> 
            </div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 third_image lazy">
              </div> 
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 fourth_image">
              </div> 
            </div>
        </div>
    </div><!-- end first section img container /-->

CSS

.first_image {
    background: url('http://lorempixel.com/1500/600/abstract/1') no-repeat center center;
    background-size: cover;
    height: 250px;
}


.second_image {
    background: url('http://lorempixel.com/1500/600/abstract/2') no-repeat center center;
    background-size: cover;
    height: 250px;
}

.third_image {
    background: url('http://lorempixel.com/1500/600/abstract/2') no-repeat center center;
    background-size: cover;
    height: 250px;
}

.fourth_image {
    background: url('http://lorempixel.com/1500/600/abstract/4') no-repeat center center;
    background-size: cover;
    height: 520px;
}