JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav">
        <ul>
            <li><a href="#page_1"> CSS3 solution #page1</a> </li>
            <li><a href="#page_2"> CSS3 solution #page2</a> </li>
        </ul>
    </nav>
    <div id="page_1"></div>
    <div id="page_2"></div>
    <article id="page1" class="wrap">PAGE1</article>
    <article id="page2" class="wrap"><span>PAGE2</span>
    </article>
    </div>

CSS

* {
        padding: 0;
        margin: 0;
    }
    
    nav ul {
        list-style: none;
        float: left;
    }
    
    nav ul li {
        display: inline-block;
        margin: 0 20px;
    }
    
    #nav {
        position: fixed;
        width: 100%;
        height: 50px;
        background: #48D1CC;
        color: #fff;
        text-align: center;
        z-index: 1;
    }
    
    a {
        text-decoration: none;
        display: inline-block;
        color: #fff;
        line-height: 50px;
    }
    
    #page1 {
        width: 100%;
        height: 700px;
        background: #3A5FCD;
        color: #fff;
        line-height: 700px;
        font-size: 100px;
        text-align: center;
        transition: transform .5s ease-in-out;
        
    }
    
    #page2 {
        width: 100%;
        height: 700px;
        background: #EE6A50;
        color: #fff;
        line-height: 700px;
        font-size: 100px;
        text-align: center;
        transition: transform .5s ease-in-out;
    }
    /*a标线的:target类似于.click*/
    /*~符号表示#haha之后临近的所有warp类*/
    #page_1:target ~ .wrap {
        transform: translateY(0px);
    }
    
    #page_2:target ~ .wrap {
        transform: translateY( -700px);
    }