JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<div class="scrl_dwn"><i class="fa fa-angle-down">V</i></div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div id="x-content-band-2">
    <h1>SCROLL HERE</h1>
    
</div>

CSS

body { background: #FF6D00; }
.fa.fa-angle-down {
    border: 2px solid #fff;
    border-radius: 100%;
    float: none;
    font-size: 26px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 12px;
}
.scrl_dwn {
    text-align: center;
    margin-top: 50px;
    }

JavaScript

$(".scrl_dwn").click(function() {
    $('html, body').animate({
        scrollTop: $("#x-content-band-2").offset().top
    }, 500);
});