JSFiddle - React, Tailwind, and code Playground

HTML

<section id="heading-section" class="fullscreen background parallax" style="background-image:url('http://vignette2.wikia.nocookie.net/greenlantern/images/3/39/Green_Lantern_The_Brightest_Day-60_Cover-1.jpg');" data-img-width="400" data-img-height="400" data-diff="100">
<div class="content-a">
<div class="content-b">
<div class="container">
<header class="section-header onscroll-animate">
  <h2>Наши услуги</h2>
  <hr class="main-hr" />
  <p>Здесь текст</p>
</header>
<div class="row">
  <div class="col-md-6 onscroll-animate">
    <div class="row">
      <div class="col-sm-6">
        <div class="service-box">
          <p>Какой-то текст</p>
          <p>Какой-то текст</p>
            <p>Какой-то текст</p>
            <p>Какой-то текст</p>
            <p>Какой-то текст</p>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="service-box">
          <p>Какой-то текст</p>
            <p>Какой-то текст</p>
            <p>Какой-то текст</p>
            <p>Какой-то текст</p>
            <p>Какой-то текст</p>
        </div>
      </div>
    </div>
    <!-- .row -->
  </div>
  <!-- .col-md-6 -->
  <div class="col-md-6 onscroll-animate" data-delay="400">
    <div class="row">
      <div class="col-sm-6">
        <div class="service-box">
          <p>Какой-то текст</p>
            <p>Какой-то текст</p>
            <p>Какой-то текст</p>
            <p>Какой-то текст</p>
            <p>Какой-то текст</p>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="service-box">
          <p>Какой-то текст</p>
            <p>Какой-то текст</p>
            <p>Какой-то текст</p>
            <p>Какой-то текст</p>
            <p>Какой-то текст</p>
        </div>
      </div>
    </div>
    <!-- .row -->
  </div>
  <!-- .col-md-6 -->
</div>
<!-- .row -->
</div>
</div>
</div>
</section>

CSS

/* Parallax */
/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%/9 !important;
}
.fullscreen,
.content-a {
    width:100%;
    min-height:100%;
}
.not-fullscreen,
.not-fullscreen .content-a,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
    height:100%;
    overflow:hidden;
}

/* content centering styles */
.content-a {
    display:table;
}
.content-b {
    display:table-cell;
    position:relative;
    vertical-align:middle;
    text-align:center;
}
#heading-section {
  min-height: 675px;
  padding-top: 30px;
  padding-bottom: 30px;
  background-size: 100%!important;
}
.home .service-box {
	padding:32px 14px 28px;
	text-align: center;
	background: rgba(255, 255, 255, 0.8);
	-webkit-box-shadow: 2px 2px 2px 2px transparent;
	-moz-box-shadow: 2px 2px 2px 2px transparent;
	box-shadow: 2px 2px 2px 2px transparent;
	margin-bottom: 30px;
}	
.parallax-section {
		margin-bottom: 20px;
		width: auto;
	}
	#heading-section {
		background-size: 1000px!important;
	}
p {
   color:#fff; 
}

JavaScript

// Parallax effects
/* detect touch */
if("ontouchstart" in window){
    document.documentElement.className = document.documentElement.className + " touch";
}
if(!$("html").hasClass("touch")){
    /* background fix */
    $(".parallax").css("background-attachment", "fixed");
}

/* fix vertical when not overflow
call fullscreenFix() if .fullscreen content changes */
function fullscreenFix(){
    var h = $('body').height();
    // set .fullscreen height
    $(".content-b").each(function(i){
        if($(this).innerHeight() <= h){
            $(this).closest(".fullscreen").addClass("not-overflow");
        }
    });
}
$(window).resize(fullscreenFix);
fullscreenFix();

/* resize background images */
function backgroundResize(){
    var windowH = $(window).height();
    $(".background").each(function(i){
        var path = $(this);
        // variables
        var contW = path.width();
        var contH = path.height();
        var imgW = path.attr("data-img-width");
        var imgH = path.attr("data-img-height");
        var ratio = imgW / imgH;
        // overflowing difference
        var diff = parseFloat(path.attr("data-diff"));
        diff = diff ? diff : 0;
        // remaining height to have fullscreen image only on parallax
        var remainingH = 0;
        if(path.hasClass("parallax") && !$("html").hasClass("touch")){
            var maxH = contH > windowH ? contH : windowH;
            remainingH = windowH - contH;
        }
        // set img values depending on cont
        imgH = contH + remainingH + diff;
        imgW = imgH * ratio;
        // fix when too large
        if(contW > imgW){
            imgW = contW;
            imgH = imgW / ratio;
        }
        //
        path.data("resized-imgW", imgW);
        path.data("resized-imgH", imgH);
        path.css("background-size", imgW + "px " + imgH + "px");
    });
}
$(window).resize(backgroundResize);
$(window).focus(backgroundResize);
backgroundResize();

/* set parallax background-position...