JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en" ng-app="StarterApp">
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
        
            <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
    <meta name="viewport" content="initial-scale=1" />
  </head>
  <body layout="column" ng-controller="AppCtrl">
    <md-toolbar layout="row">
      <button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn">
        <span class="visually-hidden">Menu</span>
      </button>
      <h1 class="md-toolbar-tools" layout-align-gt-sm="center">Hello World</h1>
    </md-toolbar>
    <div layout="row" flex>

        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
                

                	  	  <md-tabs md-center-tabs md-no-bar  md-stretch-tabs="always"  style="height:50vh;"
	  	           md-selected="selectedTopnavIndex">
				<md-tab ng-repeat="topnavTab in tabs" class="{{topnavTab.cssClass}}">
					<md-tab-label>
					<a href="#{{topnavTab.url}}{{latestSelectedSubnavIndex}}">{{topnavTab.title}} {{$index+1}}</a>
					</md-tab-label>
			</md-tab> 
	  	  </md-tabs>
                
                
            </md-content>
        </div>
        
        
        
        
    </div>

  </body>
</html>

CSS

.md-header{
    /* THIS IS A CUSTOM HEIGHT */
    height:50vh !important; /* '!important' IS JSFIDDLE SPECIFIC - ANGULAR MATERIAL CSS NEEDS OVERRIDE */
}

a{
  height:100%;
}

a:hover{
  opacity:0.5;
}

.one{
  background: orange;
}

.two{
  background: yellow;
}

.three{
  background: green;
}






/*

*/


.menuBtn {
  background-color: transparent;
  border: none;
  height: 38px;
  margin: 16px 0 0 16px;
  width: 36px;
} 
md-toolbar h1 {
  font-weight: normal;
}
md-list .md-button {
  color: inherit;
  font-weight: 500;
  text-align: left;
  width: 100%;
}

/* Using Data-URI converted from svg until <md-icon> becomes available 
https://github.com/google/material-design-icons
*/
.menuBtn {
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IkhlYWRlciI+CiAgICA8Zz4KICAgICAgICA8cmVjdCB4PSItNjE4IiB5PSItMjIzMiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPgogICAgPC9nPgo8L2c+CjxnIGlkPSJMYWJlbCI+CjwvZz4KPGcgaWQ9Ikljb24iPgogICAgPGc+CiAgICAgICAgPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+CiAgICAgICAgPHBhdGggZD0iTTMsMThoMTh2LTJIM1YxOHogTTMsMTNoMTh2LTJIM1YxM3ogTTMsNnYyaDE4VjZIM3oiIHN0eWxlPSJmaWxsOiNmM2YzZjM7Ii8+CiAgICA8L2c+CjwvZz4KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPgogICAgPGcgZGlzcGxheT0iaW5saW5lIj4KICAgIDwvZz4KPC9nPgo8L3N2Zz4=) no-repeat  center center;
}

JavaScript

var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  };
    
    
    	var tabs =
		[
	      	{
				title: 'Tab',
			  content: "You can swipe left and right on a mobile device to change tabs.",
				// url:"#/tab/productfamilies"
				url:"/tab/productfamilies/prodFamID/",
                cssClass: "one"
	  		},
			{
				title: 'Tab',
				content: "You can bind the selected tab via the selected attribute on the md-tabs element.",
				// url:"#/tab/services"
                url:"http://www.stackoverflow.com",
                cssClass: "two"

	  	  	},
			{
				title: 'Tab',
				content: "You can bind the selected tab via the selected attribute on the md-tabs element.",
				// url:"#/tab/tools"
				url:"http://www.stackoverflow.com",
                cssClass: "three"

	  	  	}
	    ];
	    $scope.tabs = tabs;
 
}]);