JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="st-container">
 
    <input type="radio" name="menu"  id="st-control-1" checked="checked"/>
    <a>Home</a>
    
 
    <input type="radio" name="menu" id="st-control-2"/>
    <a>Portfolio</a>
    
    
    <input type="radio" name="menu" id="st-control-3"/>
    <a>Work</a>
    
 
    <input type="radio" name="menu" id="st-control-4"/>
    <a>Contact</a>
    
 
    <input type="radio" name="menu" id="st-control-5"/>
    <a>About</a>
    
 
    <div class="st-scroll">
 
        <section class="FullsectionBody">
            <label for="st-control-1" class="menu-label label1">Home</label>
            <label for="st-control-2" class="menu-label label2">Portfolio</label>
            <label for="st-control-3" class="menu-label label3">How we work</label>
            <label for="st-control-4" class="menu-label label4">Contact us</label>
            <label for="st-control-5" class="menu-label label5">About us</label>
            <!-- ... -->
        </section>
 
        <section class="FullsectionBody">
            <label for="st-control-1" class="menu-label label1">Home</label>
            <label for="st-control-2" class="menu-label label2">Portfolio</label>
            <label for="st-control-3" class="menu-label label3">How we work</label>
            <label for="st-control-4" class="menu-label label4">Contact us</label>
            <label for="st-control-5" class="menu-label label5">About us</label>
            <!-- ... -->
        </section>
        
        <section class="FullsectionBody">
            <label for="st-control-1" class="menu-label label1">Home</label>
            <label for="st-control-2" class="menu-label label2">Portfolio</label>
            <label for="st-control-3" class="menu-label label3">How we work</label>
            <label for="st-control-4" class="menu-label label4">Contact us</label>
            <label for="st-control-5" class="menu-label label5">About us</label>
            <!-- ... -->
        </section>
        
       ...

CSS

body {
    overflow: hidden;
}
* {
outline: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.st-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}

.st-container > input,
.st-container > a {
    position: fixed;
    bottom: 0px;
    width: 20%;
    cursor: pointer;
    font-size: 16px;
    height: 34px;
    line-height: 34px;
}
 
.st-container > input {
    opacity: 0;
    z-index: 1000;
}
 
.st-container > a {
    z-index: 10;
    font-weight: 700;
    background: #333;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
/* position */

#st-control-1, #st-control-1 + a {
    left: 0;
}
 
#st-control-2, #st-control-2 + a {
    left: 20%;
}
 
#st-control-3, #st-control-3 + a {
    left: 40%;
}
 
#st-control-4, #st-control-4 + a {
    left: 60%;
}
 
#st-control-5, #st-control-5 + a {
    left: 80%;
}


.st-container > input:checked + a,
.st-container > input:checked:hover + a{
    background: #aaa;
}

.st-container > input:hover + a {
    background: #ccc;
}

.st-scroll,
.FullsectionBody {
    position: relative;
    width: 100%;
    height: 100%;
}
 
.st-scroll {
top: 0;
left: 0;
-khtml-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

}
 
.FullsectionBody{
   background: orange;
   overflow: hidden;
} 

#st-control-1:checked ~ .st-scroll {
   top: 0px;
}
#st-control-2:checked ~ .st-scroll {
   top:-100%;
}
#st-control-3:checked ~ .st-scroll {
   top:-200%;
}
#st-control-4:checked ~ .st-scroll {
   top:-300%;
}
#st-control-5:checked ~ .st-scroll {
   top:-400%;
}

#st-control-1:checked ~ .st-scroll >section.FullsectionBody...