JSFiddle - React, Tailwind, and code Playground

HTML

<div class='first-stripe'> 
    <a href='#scroll'><button> Go down </button></a>
</div>
<div class='second-div' id='scroll'>
    <div id='div1'></div>
    <div id='div2'></div>
    <div id='div3'></div>
    <div id='div4'></div>        
</div>

CSS

.first-stripe{
	width: 100%;
	height:500px;
	background: #ffe503;
	border-bottom: 10px solid #2f3031;
	-moz-box-sizing:    border-box;
   	-webkit-box-sizing: border-box;
    box-sizing:        border-box;

}


.second-div{
	width: 100%;
	height:500px;
}

#div1 { 
	width: 50%; height: 50%; float: left;
    background: #3174b8;
}


#div2 { 
	width: 50%; height: 50%; float: left;background: #59c09f; 
}

#div3 { 
	width: 50%; height: 50%; float: left;background: black; 
}

#div4 { 
	width: 50%; height: 50%; float: left;background: red; 
}

JavaScript

$('a[href^="#"]').click(function(){  
	    var the_id = $(this).attr("href");  
	    $('html, body').animate({  
	        scrollTop:$(the_id).offset().top  
	    }, 'slow');  
	    return false;  
	});