JSFiddle - React, Tailwind, and code Playground

by dbugger

HTML

<div class="wrapper">
<section class="slide">Slide 1</section>
<section class="slide">Slide 2</section>
<section class="slide">Slide 3</section>
<section class="slide">Slide 4</section>
</div>

CSS

/* Default states */
*{
    padding: 0;
    margin: 0;
}
html, body{
    height: 100%;
}
.wrapper{
    width: 100%;
    height: 100%;
}
.wrapper .slide{
    opacity: 0;

  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* FF4+ */
      -ms-transition: all 0.3s ease-out;  /* FF4+ */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
          transition: all 0.3s ease-out;
}
.wrapper .current{
    opacity: 1;
}

JavaScript

//Get slides
var slide = Array.prototype.slice.call( document.querySelectorAll( ".slide" ) ),
    activeSlide = 0;

//Set first one as current
slide[activeSlide].classList.add("current");

//Add event listeners
document.addEventListener( 'keydown', onDocumentKeyDown, false );

//Key Down Event Listener
function onDocumentKeyDown( event ) {

    switch( event.keyCode ) {
        //Left
        case 37:

            if (activeSlide > 0){
                slide[activeSlide--].classList.remove("current");
                slide[activeSlide].classList.add("current");
            }
            break;

        //Left
        case 39:

            if (activeSlide + 1 < slide.length){
                slide[activeSlide++].classList.remove("current");
                slide[activeSlide].classList.add("current");
            }
            break;
    }
}