JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<nav>
    <ul>
        <li><a href="#ejemplo1">ejemplo1</a></li>
        <li><a href="#ejemplo2">ejemplo2</a></li>
        <li><a href="#ejemplo3">ejemplo3</a></li>
        <li><a href="#ejemplo4">ejemplo4</a></li>
        <li><a href="#ejemplo5">ejemplo5</a></li>
    </ul>
</nav>
<div id="ejemplo1"></div>
<div id="ejemplo2"></div>
<div id="ejemplo3"></div>
<div id="ejemplo4"></div>
<div id="ejemplo5"></div>

CSS

*{margin:0; padding:0;}

nav{width:100%; padding:15px 0; position:fixed; background:#ccc; text-align:center;}
nav li{display:inline-block; vertical-align:top; list-style:none;}
nav li a{text-decoration:none; color:#fff;background:#1966ad; padding:5px 10px; transition:0.3s;}
nav li a:hover{background:#10599c;}

div{height:150px;}
#ejemplo1{background:red;}
#ejemplo2{background:#000;}
#ejemplo3{background:yellow;}
#ejemplo4{background:green;}
#ejemplo5{background:blue;}

JavaScript

$(function(){
    $('nav li a').click(function(){
        $('html, body').animate({
           scrollTop: $( $(this).attr('href') ).offset().top - (50)
        }, 1000)
    return false
    })
})