JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<a id="nav1"></a>
<a id="nav2"></a>
<a id="nav3"></a>
<header class="nav">
    <nav>
        <ul>
            <li><a href="#nav1">Home</a> </li>
            <li><a href="#nav2">About</a></li>
            <li><a href="#nav3">Contact</a></li>
        </ul>
    </nav>
</header>

<section id="main">
    <article class="article" id="nav1">
        <p>Big Tech Ideas Page1</p>
    </article>
    
    <article class="article" id="nav2">
        <p>Big Tech Ideas Page2</p>
    </article>
    
    <article class="article" id="contacto">
        <p>Big Tech Ideas Page3</p>
    </article>
</section>

CSS

a[id= "nav1"]:target ~ #main article.article {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

a[id= "nav2"]:target ~ #main article.article {
    -webkit-transform: translateY( -100vh );
    transform: translateY( -100vh );
}
a[id= "nav3"]:target ~ #main article.article {
    -webkit-transform: translateY( -200vh );
    transform: translateY( -200vh );
}

html, body {
	overflow: hidden;
}

header {
    position: fixed; 
    z-index: 10; 
}

.article {
    width: 100%;
    height: 100vh;
    z-index:0; 
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 2s ease-in-out;
    transition: transform 2s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.article p {
    font-family: sans-serif;
    font-size: 64px;
    font-size: 4rem;
    position:relative;
    line-height: 200px;
    text-align: center;
    margin: 0;
}

#nav1 {
  background: #ccccff;
}

#nav2 {
  background: #99cc99;
}
#nav3 {
  background: #ffcc66;
}