JSFiddle - React, Tailwind, and code Playground

by storm

HTML

<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-phone">
            <div id="stepProgress" class="mdl-progress mdl-js-progress"></div>
        </div>
    </div>
    <div class="mdl-grid">
        <div id="step1-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps">
            <h5 class="text-center">Step 1</h5>
        </div>
        <div id="step2-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps">
             <h5 class="text-center">Step 2</h5>
        </div>
        <div id="step3-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps">
             <h5 class="text-center">Step 3</h5>
        </div>
    </div>
    
<div id="step1" class="mdl-grid">
     <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-phone">
          <h5>Step 1 Details</h5>
     </div>
</div>

<div id="step2" style="display:none;" class="mdl-grid">
     <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-phone">
          <h5>Step 2 Details</h5>
     </div>
</div>

<div id="step3" style="display:none;" class="mdl-grid">
     <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-phone">
          <h5>Step 3 Details</h5>
     </div>
</div>

CSS

.steps {background-color: #fff; border: 1px solid #4099ff;}
.steps.box-active{background-color: #4099FF;}
.steps h5 {color:#4099ff;}
.steps h5,
#step1 h5 {margin: 25px;}
.steps.box-active h5 {color:#fff;}

JavaScript

jQuery(document).ready(function(){

jQuery('#step1-title').addClass('box-active');
   jQuery('#firstnext,#step2-title').click(function(){

        jQuery('#step1').hide();
        jQuery('#step2').show();
        jQuery('#step3').hide();
        jQuery('#step1-title').removeClass('box-active');
        jQuery('#step2-title').addClass('box-active');
        jQuery('#step3-title').removeClass('box-active');
				document.querySelector('#stepProgress').MaterialProgress.setProgress(33);
   });

     

   jQuery('#secondnext,#step3-title').click(function(){

        jQuery('#step1').hide();
        jQuery('#step2').hide();
        jQuery('#step3').show();
        jQuery('#step1-title').removeClass('box-active');
        jQuery('#step2-title').removeClass('box-active');
        jQuery('#step3-title').addClass('box-active');
				document.querySelector('#stepProgress').MaterialProgress.setProgress(66);
   });
   jQuery('#firstpre,#step1-title').click(function(){

        jQuery('#step1').show();
        jQuery('#step2').hide();
        jQuery('#step3').hide();
        jQuery('#step1-title').addClass('box-active');
        jQuery('#step2-title').removeClass('box-active');
        jQuery('#step3-title').removeClass('box-active');
        document.querySelector('#stepProgress').MaterialProgress.setProgress(00);

   });
    jQuery('#secondpre,#step2-title').click(function(){

        jQuery('#step1').hide();
        jQuery('#step2').show();
        jQuery('#step3').hide();
        jQuery('#step1-title').removeClass('box-active');
        jQuery('#step2-title').addClass('box-active');
        jQuery('#step3-title').removeClass('box-active');
				document.querySelector('#stepProgress').MaterialProgress.setProgress(33);

    });
    
    });