JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
            <div class="fade" id="fade1" onclick="slide('prev')"><</div>
            <div class="fade" id="fade2" onclick="slide('next')">></div>
            
            <div id="sliding-container">
                <div class="slide leftmost" id="followme">
                </div>
                
                <div class="slide left" id="projects">

                </div>
                
                <div class="slide current" id="home">
                    <p>Y u do dis :( fjsdahkfjdhsjfhdkjfsdjhfjsk djskfhdjfurt</p>
                </div>
                
                <div class="slide right" id="knowledge">

                </div>

                <div class="slide rightmost" id="contact">

                </div>
            </div>
            
        </div>

CSS

#container {
    width: 325px;
    white-space: nowrap;
    margin: 50px auto 50px auto; padding: 0;
    overflow-x: hidden;
}


#sliding-container {
    position: relative;
    left: -535px;
    
    transition: all 2s ease;
    -moz-transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -o-transition: all 2s ease;
}

.slide {
    width: 250px; height: 150px;
    background-color: white;
    border: 1px solid grey;
    box-shadow: 0 10px 10px 2px grey;
    display: inline-block;
    word-wrap: break-word;
    
    transition: all 2s ease;
    -moz-transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -o-transition: all 2s ease;
}

.left {
    -webkit-transform: rotateY(25deg); /* Safari and Chrome */
    -moz-transform: rotateY(25deg); /* Firefox */
}

.right {
    -webkit-transform: rotateY(-25deg); /* Safari and Chrome */
    -moz-transform: rotateY(-25deg); /* Firefox */
}

.current {
    -webkit-transform: rotateY(0deg); /* Safari and Chrome */
    -moz-transform: rotateY(0deg); /* Firefox */
}

.leftmost {
    -webkit-transform: rotateY(50deg); /* Safari and Chrome */
    -moz-transform: rotateY(50deg); /* Firefox */
}

.rightmost {
    -webkit-transform: rotateY(-50deg); /* Safari and Chrome */
    -moz-transform: rotateY(-50deg); /* Firefox */
}


.fade {
    height: 310px;
    width: 50px;
    opacity: .9;
    z-index: 20;
    position: relative;
    cursor: pointer;
    font-size: 50px;
    font-weight: bold;
    font-family: arial;
    line-height: 200px;
}

#fade1 {
    float: left;
    
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0)...