JSFiddle - React, Tailwind, and code Playground

by gazz96

HTML

<a id="sesi-I">Section 1</a>
        <a id="sesi-II">Section 2</a>
        <a id="sesi-III">Section 3</a>
        
        <nav>
          <div class="container">
            <ul>
              <li><a href="#sesi-I">Halaman I</a></li>
              <li><a href="#sesi-II">Halaman II</a></li>
              <li><a href="#sesi-III">Halaman III</a></li>
            </ul>
          </div>
        </nav>
        
        <div id="sesi-I" class="section">
          <h1>INI HALAMAN I</h1>
        </div>
        
        <div id="sesi-II" class="section">
          <h1>INI HALAMAN II</h1>
        </div>
        
        <div id="sesi-III" class="section">
          <h1>INI HALAMAN III</h1>
        </div>

CSS

*{
	padding:0;
	margin:0;
}

body, html {
 	overflow: hidden;
 	text-align: center;
  	height: 100%;
}

/* navigasi */	
nav {
	 position: fixed;
	 top: 0;
	 left: 0;
	 right: 0;
	 z-index: 10;
	 background: #212121;
}
  
ul li {
    display: inline-block; 
	padding: 6px 15px; 
}

nav ul li:hover{
	background:rgba(255,255,255,.10);
}
	
nav ul li a {
    color: rgba(255,255,255,0.45);
    font-size: 0.875rem;
    display: block;
    text-decoration: none;
	padding: 42px 7px; 
    
}
a:hover {
    color: #fff;
}


/* Section */
.section {
  height: 100%;
  width: 100%;
  display: table;
  pointer-events: none;
  z-index: 0; 
  -webkit-transition: transform 0.45s cubic-bezier(0, 0, 0.21, 1);
  transition: transform 0.45s cubic-bezier(0, 0, 0.21, 1);
}

.section h1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-weight: lighter;
 
}

#sesi-I {
 	background: #19B5FE;
}

#sesi-II {
  	background: #6BB9F0;
}

#sesi-III {
  	background: #2574A9;
}


/* animasi ketika ketika link di klik */
a[id= "sesi-I"]:target ~ #sesi-I {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

a[id= "sesi-II"]:target ~ #sesi-II {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

a[id= "sesi-III"]:target ~ #sesi-III {
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
}