JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script id="app-view-1" type="text/template">
      <div id="app-view-1-container" class="app-workbench-container active-panel">
        <h2><%= title %></h2>
        <ul class="choice-list">
          <li><a class="" id="" href="#" data-choice="choice 1"></a></li>
          <li><a class="" id="" href="#" data-choice="choice 2"></a></li>
        </ul>
      </div>
    </script>

    <script id="app-view-2" type="text/template">
      <div id="app-view-2-container" class="app-workbench-container active-panel">
        <h2><%= title %></h2>
        <form id="" class="input-panel active-panel" action="#">
          <input type="text" id="input-field-1" class="app-control">
          <input type="radio" id="radio-button-1" class="app-control" value="value-1">Value 1
          <input type="submit" id="submit-button-1" class="app-control">
        </form>
      </div>
    </script>

    <header id="app-header">
      <h1>Single Page App (SPA) Test</h1>
      <nav id="main-menu-panel">
        <ul id="main-menu">
          <li class="main-menu-item"><a id="view-1" class="" data-target="app-view-1" href="#">View 1</a></li>
          <li class="main-menu-item"><a id="view-2" class="" data-target="app-view-2" href="#">View 2</a></li>
          <li class="main-menu-item"><a id="view-3" class="" data-target="app-view-3" href="#">View 3</a></li>
        </ul>
      </nav>
    </header>

    <main id="app-body">
      <p class="active-panel">Different app partials come here...</p>
    </main>

    <footer></footer>

JavaScript

$(document).ready(function(){
  console.log("Application ready...\n");
  $(".main-menu-item").on("click", "a", function(event){
    var target = $(this).data("target");
    var partial = _.template($("#" + target).html());
    event.preventDefault();
    $(".active-panel").remove();
    $("#app-body").append(partial({title : target}));
  });
});