JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Router Demo</title>
    <script type="text/javascript" src="http://github.com/jakesgordon/javascript-state-machine/raw/master/state-machine.js"></script>
  </head>
  <body>
    <button id="back-btn" onclick="fsm.back()">Back</button>
    <button id="next-btn" onclick="fsm.next()">Next</button>
  </body>
</html>

JavaScript

var $ = function(id) { return document.getElementById(id); }

  var router = {
    update: function(event, from, to) {
      window.location.hash = "#/" + to;
      $("back-btn").disabled = fsm.can("back");
      $("next-btn").disabled = fsm.can("next");
    },
    location: window.location.hash.substring(2),
  }

  var fsm = StateMachine.create({
    initial: "intro",
    events: [

      // Next events and where to route based on our page
      { name: "next", from: "intro", to: "getname" },
      { name: "next", from: "getname", to: "welcome" },
      { name: "next", from: "welcome", to: "why" },
      
      // We can't go "back" from the initial route
      { name: "back", from: "getname", to: "intro" },
      { name: "back", from: "welcome", to: "getname" },
      { name: "back", from: "why", to: "welcome" } ],

    callbacks: {
      onintro  : router.update,
      ongetname: router.update,
      onwelcome: router.update,
      onwhy    : router.update 
    }
  });