JSFiddle - React, Tailwind, and code Playground

by whatisthebigpicture

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js"></script>
<script src="https://unpkg.com/[email protected]/release/angular-ui-router.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<ul tabs>
  <li class="tab"><a href="javascript:" ui-sref="one" ui-sref-active="active">One</a></li>
  <li class="tab"><a href="javascript:" ui-sref="two" ui-sref-active="active">Two</a></li>
  <li class="tab"><a href="javascript:" ui-sref="three" ui-sref-active="active">Three</a></li>
</ul>
<div ui-view></div>

JavaScript

'use strict'

var app = angular.module('app', [
	'app.controllers.one',
  'app.controllers.two',
  'app.controllers.three',
  'ui.materialize',
  'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider'],
	function( $stateProvider, $urlRouterProvider )
  {
  	$urlRouterProvider.otherwise('/one');
    
    $stateProvider
    	.state('one', {
      	url: '/one',
        template: '<h1>One</h1><p>{{ foo }}</p>',
        controller: 'OneCtrl'
      })
      .state('two', {
      	url: '/two',
        template: '<h1>Two</h1>',
        controller: 'TwoCtrl'
      })
      .state('three', {
      	url: '/three',
        template: '<h1>Three</h1>',
        controller: 'ThreeCtrl'
      })
  })

angular.module('app.controllers.one', [])

.controller('OneCtrl', ['$scope', function( $scope )
{
	$scope.foo = 'Bar'
}])

angular.module('app.controllers.two', [])

.controller('TwoCtrl', ['$scope', function( $scope )
{
	$scope.foo = 'Bar'
}])

angular.module('app.controllers.three', [])

.controller('ThreeCtrl', ['$scope', function( $scope )
{
	$scope.foo = 'Bar'
}])