JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="container">

<div class="banner">
<a class="button" href="#welcome"><h2 style="text-align: center;">Hi</h2></a>
</div>

<div id="page1">
<a id="welcome" href="#">Welcome</a>
<h1></h1>

<div id="welcome_squares">

<div class="quarter-column">
    <h3>Quater Column</h3>
        <p>Paragraphs</p>
</div>

<div class="quarter-column">
    <a href="#info">
        <div class="welcome_square">
            <img src="" alt="" />
        </div>
    </a>
</div>

<div class="quarter-column">
    <a href="#events">
        <div class="welcome_square">
            <img src="" alt="" />
        </div>
    </a>
</div>

<div class="quarter-column">
    <a href="#contact">
        <div class="welcome_square">
            <img src="" alt="" />
        </div>
    </a>
</div>

</div>
</div>

<div class="full-column" id="tiles">
<a href="#container" >Info</a>
</div>

<div class="full-column" id="tiles">
<a href="#container" >Events</a>
</div>

<div id="contact">
<a href="#container" id="contact">Contact</a>
</div>

</div>

CSS

a {
  background: #ddd;
  color: #444;
  font-family: sans-serif;
  text-align: center;
  text-decoration: none;
  padding: 20px;
  display: block;
}

#star {
  text-align: center;
  font-size: 100px;
  line-height: 500px;
  color: #ddd;
  
}

JavaScript

$('a[href^="#"]').on('click', function(event) {

    var target = $(this.getAttribute('href'));
    console.log(target.length);
    if( target.length ) {
        event.preventDefault();
        $('html, body').stop(true,true).animate({
            scrollTop: target.offset().top
        }, 3000);
    }

});