JSFiddle - React, Tailwind, and code Playground

by whatisthebigpicture

HTML

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

JavaScript

'use strict';

var app = angular.module('app', [
  'app.controllers.main',
  '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.main', [])

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

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';
}])