JSFiddle - React, Tailwind, and code Playground

HTML

<div id="transition-slide-container">   
   <div id="transition-slide">
        <div class="slide" id="home">
            <h1>home</h1>
        </div>
        <div class="slide" id="portfolio">
            <h1>portfolio</h1>
        </div>
        <div class="slide" id="about">
            <p>about</p>
        </div>                  
        <div class="slide" id="contact">
            <p>contact<p>
        </div>
    </div>
</div>

CSS

body{background-color: #bee1ff;}
div#transition-slide-container {    
    background: #bee1ff;    
    padding-top: 128px;
    padding-bottom: 50px;
    height: 900px;
    width: 400%;    
    z-index: -1;
    float: left;
    position: relative;
}
div#transition-slide {
    white-space: nowrap;
}
.slide {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    
}
div#inner-container {
    width: 1024px;
    margin: 0 auto;
    padding: 0;
}