JSFiddle - React, Tailwind, and code Playground

by hasantayyar

HTML

<link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.min.css">
<script src="https://rawgit.com/hasantayyar/hroute.js/master/hroute.js"></script>
<div class="container">
			<div class="navbar">
			<a href='#' class="btn btn-default">Index</a>
			<a href='#about' class="btn btn-success">About</a> 
			<a href='#video/VyT6RMgK6gI' class="btn btn-info" title="test page 1">Video 1</a> 
			<a href='#video/yt0PoGdr860' class="btn btn-info" title="test page 2">Video 2</a>
		</div>
			<div class= "jumbotron">
				<div id="content"> </div>
			</div>
		</div>

JavaScript

content = document.getElementById("content"); 
	hroute({
			'': function(){
				content.innerHTML = "default page";
			},
			'about': function(){
				content.innerHTML = "about page";
			},
			'^video\/(.*)': function(params){
				content.innerHTML = '<iframe width="100%" height="315" '+
				'src="https://www.youtube.com/embed/'+params[1]+
				'" frameborder="0" allowfullscreen></iframe>';
			} 
		},{
		default: function(){
			console.log("404/notfound/default action"); 
		}, 
		beforeAction: function(){
			console.log("before action");
		}
	});