JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/x-handlebars">
    <h2>Test App</h2>
    <ul id="menu">
      {{#linkTo 'link1'}}<li class="link-1"></li>{{/linkTo}}
      {{#linkTo 'link2'}}<li class="link-2"></li>{{/linkTo}}
      {{#linkTo 'link3'}}<li class="link-3"></li>{{/linkTo}}
      {{#linkTo 'link4'}}<li class="link-4"></li>{{/linkTo}}
      {{#linkTo 'link5'}}<li class="link-5"></li>{{/linkTo}}
    </ul>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <h2>Home Page</h2>
  </script>

  <script type="text/x-handlebars" data-template-name="link1">
    <ul id="subMenu">
      {{#linkTo 'link1.subLink1'}}<li class="subLink">Sub Link 1</li>{{/linkTo}}
      {{#linkTo 'link1.subLink2'}}<li class="subLink">Sub Link 2</li>{{/linkTo}}
      {{#linkTo 'link1.subLink3'}}<li class="subLink">Sub Link 3</li>{{/linkTo}}
      {{#linkTo 'link1.subLink4'}}<li class="subLink">Sub Link 4</li>{{/linkTo}}
      {{#linkTo 'link1.subLink5'}}<li class="subLink">Sub Link 5</li>{{/linkTo}}
    </ul>
    <h2>Link 1</h2>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="link2">
    <ul id="subMenu">
      {{#linkTo 'link2.subLink1'}}<li class="subLink">Sub Link 1</li>{{/linkTo}}
      {{#linkTo 'link2.subLink2'}}<li class="subLink">Sub Link 2</li>{{/linkTo}}
      {{#linkTo 'link2.subLink3'}}<li class="subLink">Sub Link 3</li>{{/linkTo}}
      {{#linkTo 'link2.subLink4'}}<li class="subLink">Sub Link 4</li>{{/linkTo}}
      {{#linkTo 'link2.subLink5'}}<li class="subLink">Sub Link 5</li>{{/linkTo}}
    </ul>
    <h2>Link 2</h2>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="link3">
    <ul id="subMenu">
      {{#linkTo 'link3.subLink1'}}<li class="subLink">Sub Link 1</li>{{/linkTo}}
      {{#linkTo 'link3.subLink2'}}<li class="subLink">Sub Link 2</li>{{/linkTo}}
      {{#linkTo 'link3.subLink3'}}<li class="subLink">Sub Link 3</li>{{/linkTo}}
      {{#linkTo 'link3.subLink4'}}<li...

CSS

/* Put your CSS here */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#menu, #subMenu {
	list-style: none;
	padding: 0;
	margin: 0;
}
#menu {
	position: absolute;
	top: 50%;
	right: 200px;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
#menu li {
	height: 100px;
	width: 75px;
	position: relative;
	right: -50px;
}
.link-1 {
	background: blue;
}
.link-2 {
	background: red;
}
.link-3 {
	background: purple;
}
.link-4 {
	background: green;
}
.link-5 {
	background: pink;
}
#menu a, #menu a:active, #menu a:visited {
	color: #777;
	text-decoration: none;
}
#subMenu a, #subMenu a:active, #subMenu a:visited {
	color: white;
	text-align: center;
	padding: 0 15px;
	text-decoration: none;
}
#subMenu li {
	border-bottom: 1px solid #ccc;
}
#subMenu li:hover {
	background: #777;
}
#subMenu {
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: #333;
	width: 200px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#subMenu a.active li {
	font-weight: bold;
	background: #777;
}
#menu a.active {
	font-weight: bold;
	color: black;
	text-decoration: underline;
}

JavaScript

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('link1', function(){
  	this.route('subLink1'),
  	this.route('subLink2'),
  	this.route('subLink3'),
  	this.route('subLink4'),
  	this.route('subLink5')
  });
  this.resource('link2', function(){
  	this.route('subLink1'),
  	this.route('subLink2'),
  	this.route('subLink3'),
  	this.route('subLink4'),
  	this.route('subLink5')
  });
  this.resource('link3', function(){
  	this.route('subLink1'),
  	this.route('subLink2'),
  	this.route('subLink3'),
  	this.route('subLink4'),
  	this.route('subLink5')
  });
  this.resource('link4', function(){
  	this.route('subLink1'),
  	this.route('subLink2'),
  	this.route('subLink3'),
  	this.route('subLink4'),
  	this.route('subLink5')
  });
  this.resource('link5', function(){
  	this.route('subLink1'),
  	this.route('subLink2'),
  	this.route('subLink3'),
  	this.route('subLink4'),
  	this.route('subLink5')
  });
});