JSFiddle - React, Tailwind, and code Playground

HTML

<button id="step1" class="current">step 1</button>
<button id="step2" class="hidden">step 2</button>

CSS

.current {
    display:block;
       -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
    background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
    background-color:#79bbff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #222529;
    //display:inline-block;
    //display:table-cell;
    color:#ffffff;
    font-family:arial;
    font-size:25px;
    font-weight:bold;
    //padding-left:20%;
    //padding-right:20%;
    padding-top:50px;
    padding-bottom:50px;
    text-align:center;
    text-decoration:none;
    text-shadow:1px 1px 0px #4c6d8f;
}

.hidden {
    display: none;
}

.completed {
    background-color: pink;
}

JavaScript

$(document).ready(function() {
    $("#step1").on("click", function() {
        $("#step1").removeClass("current");
        $("#step1").addClass("completed");
        $("#step2").addClass("current");
        $("#step2").removeClass("hidden");        
    });
});