JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div id="wrapper">
    
    <div id="first-slide"><a class="scroll" href="#secound-slide">Secound slide</a></div>
        <div id="secound-slide">
            <ul class="nav">
                <li><a href="#first-slide">first slide</a></li>
                <li><a href="#third-slide">thirds slide</a></li>
                <li><a href="#fourth-slide">fifth-slide</a></li>                
            </ul>            
        </div>
        <div id="third-slide">Third slide</div>
</div>

CSS

body, html {width:100%; height:100%;}
#wrapper {width:100%; height:100%; background-color:#F60;}

#first-slide {width:100%; height:100%; background-color:#567;}
#secound-slide {width:100%; height:100%; background-color:#789;}
.nav {width:100%; height:70px; background-color:#000; opacity:.5; color:#FFF;}
.nav li {float:left; margin-right:20px;}
#third-slide {width:100%; height:100%; background-color:#567;}

JavaScript

jQuery(document).ready(function($) {
    $(".scroll").click(function(event){                
        event.preventDefault();         $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);     }); });