JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="box-red" class="box">DIV1</div>
    <div id="box-yellow" class="box">DIV2</div>
    <div id="box-green" class="box">DIV3</div>
    <div id="box-maroon" class="box">DIV4</div>
</div>
    <a href="#" onClick="return prev();">previous</a>  &nbsp; <a href="#" onClick="return next();">next</a>

CSS

<style type="text/css" media="screen">
#container{position:relative;width:120px;height:120px;}
#container div{position:absolute;width:120px;height:120px;}
#box-red{background:red;}
#box-yellow{background:yellow;display:none;}
#box-green{background:green;display:none;}
#box-maroon{background:maroon;display:none;}
</style>

JavaScript

var $c =0;
function next(){
    var boxes = document.getElementsByClassName("box");
    $c +=1;
    if($c >= boxes.length) $c = 0;
    for (var $i=0;$i<boxes.length;$i++){
        boxes[$i].style.display  = "none";
    }
    boxes[$c].style.display  = "block";
    return false;
}
function prev(){
    var boxes = document.getElementsByClassName("box");
    $c -=1;
    if($c < 0) $c = (boxes.length-1);   
    for (var $i=0;$i<boxes.length;$i++){
        boxes[$i].style.display  = "none";
    }
        boxes[$c].style.display  = "block";
    return false;   
}