JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" id="myWizard">

   <div class="navbar prog">
      <div class="navbar-inner">
            <ul class="nav nav-pills">
               <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Step 1</a></li>
               <li><a href="#step2" data-toggle="tab" data-step="2">Step 2</a></li>
               <li><a href="#step3" data-toggle="tab" data-step="3">Step 3</a></li>
               <li><a href="#step4" data-toggle="tab" data-step="4">Step 4</a></li>
               <li><a href="#step5" data-toggle="tab" data-step="5">Step 5</a></li>
            </ul>
      </div>
   </div>
   
   <div class="progress">
     <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="1" style="width: 20%;">
<!--        Step 1 of 5 -->
     </div>
   </div>
  
   <div class="tab-content">
      <div class="tab-pane fade in active" id="step1">
        Step 1
      </div>
      <div class="tab-pane fade" id="step2">
        Step 2
      </div>
      <div class="tab-pane fade" id="step3">
        Step 3
      </div>
      <div class="tab-pane fade" id="step4">
        Step 4
      </div>
      <div class="tab-pane fade" id="step5">
        Step 5
      </div>
   </div>
</div>

<br/>
<hr/>

<div class="container">


  <div class="row row_flex">
    <div class="col-md flx">
      <div class="panel_wrap flx">
            <div class="hd">1 of 1</div>
            <p class="flex_el">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
            </p>
<!--             <a><button type="button" class="col-sm-12 col-lg-4 offset-lg-4 btn...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
  border: solid 1px #dddddd;
  padding: 10px;
}

.row.sub {
  background: #dff0f1;
  margin-bottom: 10px;
  border: solid 1px #dddddd;
  padding: 0;
}

.row.nill {
  background: none;
  margin: 0;
  border: none;
  padding: 0;
}

.row_flex {
    display: flex;
}

.row.sub [class*="col-"] {
  margin: 0;
}

.flx {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.flex_el {
    flex: 1 1 auto;
}

.navbar.prog {
  margin-bottom: 0;
  min-height: 0;
}

.navbar.prog li {
  width: 20%;
  padding: 0;
  margin: 0;
  text-align: center;
}

.progress { 
  height: 5px; 
  padding: 0;
  margin: 0;
}

[class*="col-"] {
  padding: 10px;
  font-size: 14px;
}

[class*="col-"] .panel_wrap {
  overflow: hidden;
  border: solid 1px #6c757d;
  padding: 10px;
  padding-top: 0;
  background: #fff;
}

[class*="col-"] .panel_wrap.nill {
  border: solid 1px #6c757d;
  padding: 0 10px 0 0;
}

[class*="col-"] .panel_wrap.nill a.lit {
  margin: 0 0 10px 10px;
}

[class*="col-"] .panel_wrap img {
    width: 100%;
    padding-top: 10px;
    margin-bottom: 10px;
}

[class*="col-"] .panel_wrap img.nill {
    padding-top: 0;
    margin-bottom: 0;
}

[class*="col-"] .panel_wrap .hd {
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  background: #eeefff;
  margin-top: 0px;
  margin-left: -10px;
  margin-right: -10px;
  padding: 10px;
}

[class*="col-"] .panel_wrap p {
  padding: 10px 0 0 0;
  /* margin-bottom: 0; */
}

[class*="col-"] .panel_wrap p.alter {
  padding: 0;
}

/*-- Media Queries --*/

@media (max-width: 767px) {
  .navbar.prog li {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .bttn_wrapper .btn:last-child { margin-top: 10px; }
}

@media (max-width: 991px) {
  [class*="col-"] .panel_wrap.nill {
    padding: 0;
  }
  
  [class*="col-"] .panel_wrap.nill a.lit {
      margin: 0 10px 10px 10px;
  }
}

JavaScript

$(document).ready(function() {

  $('.next').click(function() {

    var nextId = $(this).parents('.tab-pane').next().attr("id");
    $('[href=#' + nextId + ']').tab('show');
    return false;

  })

  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {

    //update progress
    var step = $(e.target).data('step');
    var percent = (parseInt(step) / 5) * 100;

    $('.progress-bar').css({
      width: percent + '%'
    });
    $('.progress-bar').text("Step " + step + " of 5");

    //e.relatedTarget // previous tab

  })

  $('.first').click(function() {

    $('#myWizard a:first').tab('show')

  });

});