JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fonts.googleapis.com/css?family=Raleway:400,500,600,700"></script>



<body>

  <!-- Primary Page Layout
	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <img src="images/bg.png" id="background">

  <div id="headerbg">
    <div class="container">
      <div class="row">
        <div class="five columns">
          <img src="images/thv-header.png" id="header">
        </div>
        <div class="seven columns">
          <nav>
            <ul>
              <li><a href="#about">About</a>
              </li>
              <li><a href="#contact">Contact</a>
              </li>
              <li><a href="#designers">Designers</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div id="aboutbg">
    <div class="container2">
      <div class="row">
        <div class="twelve columns">
          <h4 id="about">About Us</h4>
        </div>
        <div class="animated">
          <div class="twelve columns">
            <p>TheVersionArts is a private design studio. We were founded in the winter of 2014. We connect clients to the designers they need. Our goal is to serve high quality design at an affordable price through the internet. We strive to impress our
              clients. We don't sell graphics, or designs. We sell art and colours.</p>
          </div>
        </div>
        <div class="animated">
          <div class="seven columns" id="aboutbar"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="managersbg">
    <div class="container3">
      <div class="row">
        <div class="animated">
          <h4 id="managers">Our Managers</h4>
        </div>
      </div>
      <div class="row">
        <div class="animated one-third-column" id="screamer">
          
        </div>
        <div class="animated one-third-column" id="swezii">
          
        </div>
        <div class="animated one-third-column" id="kinzu">
          
        </div>
      </div>
     ...

CSS

/* Managers */

/* 278 PX */

#managersbg {
  background-color: rgba(255, 153, 0, 0.79);
  position: absolute;
  left: 0px;
  top: 495px;
  width: 100%;
}
@media (min-width: 288px) {
  #managersbg {
    top: 495px;
  }
}
@media (min-width: 295px) {
  #managersbg {
    top: 470px;
  }
}
@media (min-width: 350px) {
  #managersbg {
    top: 455px;
  }
}
@media (min-width: 358px) {
  #managersbg {
    top: 460px;
  }
}
@media (min-width: 364px) {
  #managersbg {
    top: 435px;
  }
}
@media (min-width: 416px) {
  #managersbg {
    top: 410px;
  }
}
@media (min-width: 450px) {
  #managersbg {
    top: 420px;
  }
}
@media (min-width: 485px) {
  #managersbg {
    top: 400px;
  }
}
@media (min-width: 510px) {
  #managersbg {
    top: 410px;
  }
}
@media (min-width: 540px) {
  #managersbg {
    top: 420px;
  }
}
@media (min-width: 550px) {
  #managersbg {
    top: 470px;
  }
}
@media (min-width: 624px) {
  #managersbg {
    top: 450px;
  }
}
@media (min-width: 650px) {
  #managersbg {
    top: 460px;
  }
}
@media (min-width: 671px) {
  #managersbg {
    top: 435px;
  }
}
@media (min-width: 775px) {
  #managersbg {
    top: 410px;
  }
}
@media (min-width: 850px) {
  #managersbg {
    top: 420px;
  }
}
@media (min-width: 914px) {
  #managersbg {
    top: 400px;
  }
}
h4 {
  text-align: center;
  font-weight: 500
}
h2{
    text-align:center;
}
div.animated{
    border-width:1px;
    border-style:solid;
}
#managers {
  position: relative;
  top: 15px;
}
#screamer,
#swezii,
#kinzu {
  background-image: url(../images/screamer.png);
  background-size: 100%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-color: rgba(255, 153, 0, 0);
  margin: 0 auto;
}
/*#screamer {
  margin-top: 20px;
}
#swezii {
  position: relative;
  top: 125px;
}
#kinzu {
  position: relative;
  top: 275px;
}
#manager1,
#manager2,
#manager3 {
  position: relative;
}*/
/*#manager1 {
  top: -115px;
}
#manager1,
#manager2,
#manager3 {
  font-weight: 600
}
#manager2 {
  top: 45px;
}
#manager3 {
 ...

JavaScript

$(document).ready(function() {

  (function($) {

    /**
     * Copyright 2012, Digital Fusion
     * Licensed under the MIT license.
     * http://teamdf.com/jquery-plugins/license/
     *
     * @author Sam Sehnert
     * @desc A small plugin that checks whether elements are within
     *     the user visible viewport of a web browser.
     *     only accounts for vertical position, not horizontal.
     */

    $.fn.visible = function(partial) {

      var $t = $(this),
        $w = $(window),
        viewTop = $w.scrollTop(),
        viewBottom = viewTop + $w.height(),
        _top = $t.offset().top,
        _bottom = _top + $t.height(),
        compareTop = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom;

      return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

    };

  })(jQuery);

  var win = $(window);

  var allMods = $(".animated");

  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("already-visible");
    }
  });

  win.scroll(function(event) {

    allMods.each(function(i, el) {
      var el = $(el);
      if (el.visible(true)) {
        el.addClass("come-in");
      }
    });

  });

});