JSFiddle - React, Tailwind, and code Playground

by asif097

HTML

<div class="page-wrap">
    <div class="nav">
        <div class="nav-inner"> <a id="link1" class="active" href="#target1">target1</a>
 <a id="link2" href="#target2">target2</a>
 <a id="link3" href="#target3">target3</a>
            <br /><b>ola</b>

        </div>
    </div>
    <div class="emni">
        <div id="target1">aaaaaaaaaaaaaaa</div>
        <div id="target2">bbbbbbbbbbbbbbb</div>
        <div id="target3">ccccccccccccccc</div>
    </div>
</div>

CSS

html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input, hr {
    margin:0;
    padding:0;
}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th {
    font-size:1em;
    overflow:hidden;
    font-weight:normal;
    font-style:normal;
    color:#000;
}
ul, ol {
    list-style:none;
}
fieldset, img, hr {
    border:none;
}
caption, th {
    text-align:left;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
td {
    vertical-align:top;
}
html, body {
    height:100%;
    overflow:hidden;
}
div.clear {
    clear:both;
}
body {
    width:auto;
}
.page-wrap {
    display:inline-block;
    width:100%;
    height:100%;
    background:#FF0;
}
#link1, #link2, #link3 {
    display:inline;
    text-align:center;
}
#link2 {
    margin-left:105px;
}
#link3 {
    margin-left:105px;
}
.nav {
    display:block;
    width:100%;
    height:50px;
    position:fixed;
    top:100px;
    border-bottom:1px solid #fff;
    z-index:100;
}
.nav-inner {
    display:block;
    width:500px;
    height:40px;
    margin:0 auto;
    margin-top:10px;
    border-bottom:1px solid #000;
}
.nav-inner a {
    color:#333;
}
.emni {
    height:500px;
    overflow:hidden;
}
#target1, #target2, #target3 {
    text-align:center;
    display:block;
    width:100%;
    height:100%;
    text-align:center;
}
#target1 {
    margin-top:0;
    background:#F00;
}
#target2 {
    background:#0f0;
}
#target3 {
    background:#00f;
}

JavaScript

$(document).ready(function () {


    $('.nav-inner a').on('click',function (e) {
        $('.emni').animate({
            scrollTop: $(this.hash).offset().top
        }, '100%');
        e.preventDefault();
    });




});