JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body class="wp-customizer">
<h4>This is some text in the body</h4>
<p>More body text</p>
</body>

CSS

body.skizzar_onboarding {
    position:fixed;
    z-index:100;
}
#so_overlay {
    width:100%;
    height:100%;
    z-index:998;
    position:relative;
    left:0;
    top:0;
    background:rgba(0,0,0,0.5);
}

#so_overlay p {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: 300;
}
#so_overlay h2 {
    font-family: 'NeuzeitGro-Bol';
    font-size: 2em;
    line-height: 0;
}
.button_holder button {
    background: #52BDE6 none repeat scroll 0% 0%;
    border: 0;
    color: #FFF;
    text-transform: uppercase;
    border-color: #FFF;
    border-radius: 4px;
    padding: 10px 20px;
    cursor:pointer;
}
button.disabled {
    background:#cccccc !important;
    pointer-events: none;
    cursor:default;
}
#next {
    float:right;
    margin-right:20px;
}
#prev {
    float:left;
    margin-left:20px;
}
#onboarding_steps_container {
    background:white;
    box-shadow:0 0 15px rgba(0,0,0,0.15);
    border:6px solid #000000;
    position:absolute;
    padding: 20px;
    border-radius: 10px !important;
    padding-bottom:80px;
    width:50%;
    height:250px;
}
.onboarding_steps {
    width:100%;
    height:100%;
}
.button_holder {
    width: 100%;
    position: absolute;
    bottom: 0px;
    padding-bottom: 20px;
    text-align: center;
    left: 0;
}

JavaScript

jQuery(function ($) {
  $('body').attr('onboarding_step', 'step1');
  $('body.wp-customizer').addClass('skizzar_onboarding');
  $('<div id="so_overlay"></div>').insertBefore('body.wp-customizer');
  // first step
  $('#so_overlay').html('<div id="onboarding_steps_container" class="step1"></div>');
  $('#onboarding_steps_container').html('<div class="onboarding_steps"></div><div class="button_holder"><button id="prev" class="step1"><i class="fa fa-chevron-left"></i> PREV</button><button id="next" class="step1">NEXT <i class="fa fa-chevron-right"></i></button></div>');
  // here's the steps
var steps = [
  "wp-content/plugins/skizzar-onboarding/ajax/step1.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step2.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step3.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step4.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step5.php",
];
counter = 0;
$('.onboarding_steps').load(steps[counter]);
$('#next').click(function () {
  counter = (counter + 1) % steps.length; 
    $('.onboarding_steps').load(steps[counter]); 
    $('#onboarding_steps_container, .button_holder button, #so_overlay').attr('class', 'step' + (counter + 1)); 
    $('body').attr('onboarding_step', 'step' + (counter + 1)); 
});

$('#prev').click(function () {
  counter = (counter - 1) % steps.length; 
    $('.onboarding_steps').load(steps[counter]); 
    $('#onboarding_steps_container, .button_holder button, #so_overlay').attr('class', 'step' + (counter + 1)); 
    $('body').attr('onboarding_step', 'step' + (counter + 1)); 
});
   
    
$('.step2 #next').click(function () {
    alert('step 2 pressed');
});

});