JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#p7">Jump to paragraph 7</a>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula rutrum felis, vel dignissim odio euismod ut. Maecenas justo nisi, volutpat nec erat congue, faucibus ultrices tortor. Nullam sodales imperdiet sem. Ut feugiat scelerisque ultrices. Pellentesque sit amet ligula sed diam convallis viverra sit amet nec metus. Nulla facilisi. Phasellus ac velit sed nisl tempor commodo vel et sem. Sed tincidunt ornare arcu, ac vehicula sem tincidunt a. Suspendisse potenti. Vestibulum purus dolor, rhoncus eu pretium a, rutrum nec massa. Curabitur sed turpis convallis, pellentesque nisi eu, ultrices ipsum. Suspendisse vehicula ipsum eu molestie aliquet. Nam hendrerit nisi et ligula interdum interdum.</p>

<p id="p2">Nulla placerat tellus nec arcu ultrices, at tincidunt sapien efficitur. Donec at augue ut diam iaculis sollicitudin sit amet vitae sapien. Sed sit amet est libero. Vivamus tincidunt, risus a pellentesque placerat, risus quam cursus dui, vitae sodales velit nunc in nulla. Aliquam posuere ac magna eu bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eget quam ornare, fringilla dolor eget, gravida nibh. Etiam sit amet tellus elementum, venenatis massa ac, accumsan mi. Pellentesque pellentesque, ipsum eget iaculis egestas, odio est auctor elit, sit amet feugiat ante nisi vitae neque.</p>

<p id="p3">Phasellus neque ligula, volutpat sed quam vitae, congue pretium lacus. Duis rhoncus sem non sodales tincidunt. Nam pulvinar dui nisi, a vehicula massa rhoncus eu. Integer velit ligula, feugiat a euismod in, ultrices et nunc. Nam id efficitur nisl. Curabitur ac velit imperdiet, mattis leo eu, iaculis odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed maximus, ligula volutpat faucibus molestie, sapien nisi posuere felis, nec sodales sapien nibh ac lorem. In in sapien ac magna dapibus porta. Duis tincidunt eu ante ac ultrices. Quisque...

JavaScript

var smoothScroll = (function(root){
    var targetElement;
    root.addEventListener('transitionend', function(e){
        root.style['transition'] = '';
        root.style['transform'] = '';
       targetElement.scrollIntoView();
    });
    return function(element, time){
        var offset = element.offsetTop - (window.scrollY||document.documentElement.scrollTop||root.scrollTop);
        offset = Math.min( offset, root.offsetHeight - document.documentElement.clientHeight );
        targetElement = element;
        root.style['transition'] = 'transform '+time;
        root.style['transform'] = 'translateY(' + offset * -1 +'px)';
    }
}(document.body));

[].slice.call( document.getElementsByTagName('a') ).forEach(
    function(link){
        link.addEventListener( 'click', function(e){
        var targetElement = document.getElementById( e.target.href.replace(/[^#]*#/,'') );
        smoothScroll( targetElement, '500ms' );
       e.preventDefault(); 
    })
});