JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jasny.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://jasny.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div id="myModal" class="modal hide fade" data-step="1">
 <div class="step step1">
  <h1>Step 1</h1>
  <button class="btn next">Next</button>
 </div>
 <div class="step step2">
  <h1>Step 2</h1>
  <button class="btn previous">Previous</button>
  <button class="btn next">Next</button>
 </div>
 <div class="step step3">
  <h1>Step 3</h1>
  <button class="btn previous">Previous</button>
  <button class="btn done" data-dismiss="modal">Done</button>
 </div>
</div>

CSS

#myModal > .step { display: none; }

JavaScript

$(function() {
  showStep(parseInt($('#myModal').data('step')) || 1);
     
  $('#myModal .next').on('click', function () {
   showStep(parseInt($('#myModal').data('step')) + 1);
  });

  $('#myModal .previous').on('click', function () {
   showStep(parseInt($('#myModal').data('step')) - 1);
  });

  $('#myModal').on('hidden', function() {
   showStep(1);
  });
  
  function showStep(step) {
   $('#myModal').data('step', step);
   $('#myModal > .step').hide();
   $('#myModal > .step' + step).show();
  }
 });