JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="splash-banner">
  <h2 style="text-align:center;padding-top:50px">
Example Splash page banner
</h2>
  <a class="scroll-down-icon" href="#maincontent">
    <img src="https://bmcuniversaltech.com/wp-content/themes/bmctechnologiesinc-dev/images/Assets_Icons_Arrow.svg">
  </a>
</div>
<br>
<br>
<br>
<div id="maincontent">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum suscipit massa at imperdiet. Sed venenatis magna magna, non lacinia mi mattis nec. Quisque rutrum lacinia velit. Nam enim dolor, aliquet eu convallis vitae, aliquam eget felis.
    Integer sit amet cursus augue. Pellentesque porta fringilla lectus, eu porttitor nibh. Donec maximus, lacus sit amet scelerisque cursus, odio libero lobortis urna, sed tempor neque augue in sem. Nunc non placerat metus. Proin tristique velit accumsan,
    blandit arcu euismod, ultricies tortor. Mauris tellus nulla, sodales non tortor maximus, iaculis imperdiet ipsum. Donec id urna vitae nunc vehicula blandit. Quisque suscipit nisl convallis libero egestas, eget semper elit ullamcorper. Pellentesque
    risus neque, mollis eget metus et, commodo dignissim sapien. Nunc tristique, mi sed sodales vehicula, lorem magna commodo lacus, in ornare nisi mi sed est. Nulla id libero velit. Curabitur porta odio ut neque sollicitudin cursus. Aliquam hendrerit
    auctor lorem at ullamcorper. Praesent non consequat ligula, lobortis rutrum felis. Donec ut iaculis arcu. Quisque ultricies cursus ex et ornare. Fusce dignissim lacinia metus, eget tempus enim ultricies eu. Praesent leo dui, fermentum tempus condimentum
    a, aliquam quis sapien. Nulla facilisi. Nam sodales orci elit, sit amet lobortis ante tristique nec. Cras rutrum porttitor mi, vel elementum sapien. Suspendisse auctor ipsum mollis tellus gravida gravida. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Pellentesque rutrum...

CSS

.splash-banner {
  background: #f28f2d url();
  height: 100vh;
  after:: {}
}

.scroll-down-icon {
  width: 100%;
  position: absolute;
  bottom: 35px;
  left: 0;
  text-align: center;
  z-index: 6;
}

JavaScript

jQuery(function($){
$(document).ready(function() {
$(document).on('click', 'a', function(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 700);
});
})
})