JSFiddle - React, Tailwind, and code Playground

by sungsoonz

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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Convey Law</a>
    </div>
  </div>
</nav>
<div class="container conveylaw">
  <h3 class="title">Sales <span>Conveyancing Quote</span></h3>
  <div id="rootwizard">
    <div class="navbar">
      <label>Step</label>
      <ul class="nav">
        <li>
          <a href="#tab1" data-toggle="tab">1</a>
        </li>
        <li>
          <a href="#tab2" data-toggle="tab">2</a>
        </li>
        <li>
          <a href="#tab3" data-toggle="tab">3</a>
        </li>
        <li class="conditional" data-target="tab4">
          <a disabled href="#tab4" data-toggle="tab">4</a>
        </li>
        <li class="conditional" data-target="tab5">
          <a href="#tab5" data-toggle="tab">5</a>
        </li>
        <li class="conditional" data-target="tab6">
          <a href="#tab6" data-toggle="tab">6</a>
        </li>
      </ul>

    </div>
    <div class="tab-content">
      <div class="tab-pane first" id="tab1">
        <h5 class="sub-title">Step title goes here</h5>
        <p class="desc">Step description goes here.</p>
        <label>Name</label>
        <input type="text" class="form-control" placeholder="Enter ...">
        <label>Phone Number</label>
        <input type="text" class="form-control" placeholder="Enter ...">
        <label>Email</label>
        <input type="email" class="form-control" placeholder="Enter ...">
      </div>
      <div class="tab-pane" id="tab2">
        <h5 class="sub-title">Step title...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
nav.navbar {
  background: #3D3F57;
  min-height: 60px;
  border-radius: 0;
}

nav.navbar .navbar-header .navbar-brand,
nav.navbar .navbar-nav > li > a {
  color: #fff;
  height: 60px;
  padding: 20px;
}

.conveylaw {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  padding-top: 20px;
}

.conveylaw ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.conveylaw label {
  font-size: 13px;
  font-weight: 500;
  color: #555;
}

.conveylaw a:focus {
  outline: none;
}

.conveylaw .title {
  font-weight: 600;
  margin-bottom: 25px;
}

.conveylaw .title span {
  font-size: 16px;
  font-weight: 400;
  color: #aaa;
  letter-spacing: 0.5px;
  margin-left: 15px;
}
.conveylaw .sub-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 16px;
  font-weight: 600;
}
.conveylaw .tab-pane .desc {
  margin-bottom: 25px;
  font-size: 13px;
  color: #888;
}

.conveylaw .form-control {
  border: 1px solid #CCCCCC;
  border-radius: 0 !important;
  box-shadow: none;
  margin-bottom: 20px;
  height: 46px;
}

.conveylaw select.form-control {
  background-color: white;
  display: inline-block;
  font: inherit;
  padding: 0.5em 3.5em 0.5em 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #666 50%, transparent 50%), linear-gradient(to right, #ddd, #ddd);
  background-position: calc(100% - 20px) calc(1em + 5px), calc(100% - 15px) calc(1em + 5px), calc(100% - 2.5em) 0.6em;
  background-size: 5px 5px, 5px 6px, 1px 2em;
  background-repeat: no-repeat;
}

.conveylaw .sub {
  padding-left: 15px;
  border-left: 3px solid #eaeef1;
  margin-top: 10px;
  display: none;
}

.conveylaw #rootwizard ul.nav li.conditional a {
  color: #ccc;
}

.conveylaw .pager {
  margin: 40px 0;
}

.conveylaw .pager li a {
  color:...

JavaScript

var current;
$('#rootwizard').bootstrapWizard({
  onTabShow: function(tab, navigation, index) {
  	current = index+1;
    var $total = navigation.find('li').length;
    var $lastBtn = $('.pager li.submit');
    var $nextBtn = $('.pager li.next');
    var $prevBtn = $('.pager li.previous');

    // Reset tab-pane to reflect conditional choices 
    $('.tab-pane').removeClass('last');
    $('.tab-pane:not(.conditional):last').addClass('last');

		if ($('.tab-pane.active').next().hasClass('conditional')) {
      	$('.pager li.next').addClass('conditional');
    } else {
      	$('.pager li.next').removeClass('conditional');
    } 
    
    $('body').on('click', 'li.conditional a', function(e) {
   		e.preventDefault();
   		return false;
		});
    
    if ($('.tab-pane.active').hasClass('last')) {
      $nextBtn.hide();
      $lastBtn.show();
    } else {
      $nextBtn.show();
      $lastBtn.hide();
    }

    if ($('.tab-pane.active').hasClass('first')) {
      $prevBtn.hide();
    } else {
      $prevBtn.show();
    }
  }
});

$('.conveylaw #rootwizard select').on('change', function(e) {
	var $this = $(this);
	if( $this.attr('data-target') ) {
		var target_id = $this.data('target');
    if(target_id.indexOf('sub') > -1) {
			$('#'+target_id).fadeIn();
    } else {
    	
    	if ($('.tab-pane.active').next().hasClass('conditional')) {
      	$('.pager li.next').addClass('conditional');
      }

    	$("ul.nav li[data-target='" + target_id +"']").removeClass('conditional');
      $('#'+target_id).removeClass('conditional');
      $('#rootwizard').bootstrapWizard('previous');
    	$('#rootwizard').bootstrapWizard('show', current);
    }
  }
	
});