JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<html><head>
    <style>
        *[class^="prlx"] {
  position: absolute;
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: 110%;
}
.prlx-2 {
  background-image: url('http://www.roscodigitalmedia.co.uk/rosco/wp-content/uploads/2015/12/bigstock-Artist-Photographer-Retouches-91840682.jpg');
}
    </style>
<style type="text/css"></style></head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid homeHeader">
  <div class="prlx-2" style="top: 0px;">

  </div>
</div>
    <script type="text/javascript">
            jQuery(document).ready(function() {
      jQuery(window).scroll(function() {
        jQuery('.prlx-2').each(function(r) {
          var $this = $(this);
          var pos = $this.offset().top;
          var scrolled = $(window).scrollTop();
          $this.css('top', +(scrolled * 0.6) + 'px');
        });
      });
    });
    </script>

</body></html>