JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="stage-ctn">
    <div class="arrw-ctn">
        <a href="" class="arrw arrw-l">&lt;</a>
        <a href="" class="arrw arrw-r">&gt;</a>
    </div>
    <div class="stage stage-1 active">Stage-1</div>
    <div class="stage stage-2">Stage-2</div>
    <div class="stage stage-3">Stage-3</div>
</div>

CSS

.black{
    background:rgb(40,40,40)
}
*{
    font-family:sans-serif;
    font-size:12px;
    font-weight:bold;
    color:rgb(50,50,50);
}
.stage-ctn{
    display:block;
    width:300px;
    height:300px;
    margin:20px auto;
}
.stage{
    display:block;
    width:300px;
    height:95px;
    background:rgb(200,200,200);
    border-bottom:rgb(150,150,150) solid 5px;
    line-height:95px;
    text-align:center;
    opacity:.5;
    transition: all .5s;
}
.active{
    opacity:1;
}
.arrw-ctn{
    display:block;
    width:300px;
    overflow:hidden;
    padding:0 0 5px;
}
.arrw{
    text-decoration:none;
    color:rgb(50,50,50);
}
.arrw-l{
    padding-left:5px;
    float:left;
}
.arrw-r{
    padding-right:5px;
    float:right;
}
.inactive{
    opacity:.5;
    cursor:default;
}

JavaScript

$('.stage-ctn').each(function(){
    var active = $(this).find('.active'),
        prev = $(this).find('.arrw-l'),
        next = $(this).find('.arrw-r');
    
    if(active.hasClass('stage-1')){
        stage1 = true;
        $(prev).addClass('inactive');
    } else if(active.hasClass('stage-2')){
        stage2 = true;
    } else if(active.hasClass('stage-3')){
        stage3 = true;
        $(next).addClass('inactive');
    } else{
    }
    
    $('.inactive').click(function() {
        return false;
    });
    $(prev).click(function() {
        if(stage3 === true){
            $('.stage-3').removeClass('active');
            setTimeout(function(){
                $('.stage-2').addClass('active');
                $(next).removeClass('inactive');
            },300),
            stage3 = false;
            stage2 = true;
            return false;
        } else if(stage2 === true){;
            $(prev).addClass('inactive');
            $('.stage-2').removeClass('active');
            setTimeout(function(){
                $('.stage-1').addClass('active')
            },300),
            stage2 = false;
            stage1 = true;
            return false;
        } else if(stage1 === true){
            return false;
        } else {
            $('body').addClass('black');
            return false;
        }
    });
    $(next).click(function() {
        if(stage1 === true){
            $('.stage-1').removeClass('active');
            setTimeout(function(){
                $('.stage-2').addClass('active');
                $(prev).removeClass('inactive');
            },300),
            stage1 = false;
            stage2 = true;
            return false;
        } else if(stage2 === true){
            $(next).addClass('inactive');
            $('.stage-2').removeClass('active');
            setTimeout(function(){
                $('.stage-3').addClass('active');
            },300),
            stage2 = false;
            stage3 = true;
            return false;
 ...