JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-rc.3/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-rc.3/js/ionic.bundle.min.js"></script>
<body ng-app="starter">
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
    <script id="tabs.html" type="text/ng-template">
        <ion-tabs class="tabs-icon-top tabs-positive">
            <!-- Dashboard Tab -->
            <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
                <ion-nav-view name="tab-dash"></ion-nav-view>
            </ion-tab>
            
            <!-- Chats Tab -->
            <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
                <ion-nav-view name="tab-chats"></ion-nav-view>
            </ion-tab>
            
            <!-- Account Tab -->
            <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
                <ion-nav-view name="tab-account"></ion-nav-view>
            </ion-tab>
        </ion-tabs>
    </script>
    <script id="tab-dash.html" type="text/ng-template">
        <ion-view view-title="Dashboard">
            <ion-content class="padding">
                <div class="list card">
                    <div class="item item-divider">Recent Updates</div>
                    <div class="item item-body">
                        <div>
                            There is a fire in <b>sector 3</b>
                        </div>
                    </div>
                </div>
                <div class="list card">
                    <div class="item item-divider">Health</div>
                    <div class="item item-body">
                        <div>
                            You ate an apple today!
                        </div>
                    </div>
           ...

JavaScript

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
    .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('tab', {
        url: "/tab",
        abstract: true,
        templateUrl: "tabs.html"
    })
        .state('tab.dash', {
        url: '/dash',
        views: {
            'tab-dash': {
                templateUrl: 'tab-dash.html',
                controller: 'DashCtrl'
            }
        }
    })
        .state('tab.chats', {
        url: '/chats',
        views: {
            'tab-chats': {
                templateUrl: 'tab-chats.html',
                controller: 'ChatsCtrl'
            }
        }
    })
        .state('tab.chat-detail', {
        url: '/chats/:chatId',
        views: {
            'tab-chats': {
                templateUrl: 'chat-detail.html',
                controller: 'ChatDetailCtrl'
            }
        }
    })

        .state('tab.account', {
        url: '/account',
        cache: false,
        views: {
            'tab-account': {
                templateUrl: 'tab-account.html',
                controller: 'AccountCtrl'
            }
        }
    });
    $urlRouterProvider.otherwise('/tab/dash');
})
.run(function ($rootScope) {
    var element;
    $rootScope.$on('$stateChangeStart', function (event, next) {
        if (next.name) {
            element = angular.element(document.querySelectorAll('ion-header-bar'));
            switch(next.name) {
                case 'tab.chats':
                    element.removeClass('bar-positive');
                    element.removeClass('bar-balanced');
                    element.addClass('bar-calm');
                    break;
                case 'tab.dash':
                    element.removeClass('bar-calm');
                    element.removeClass('bar-balanced');
                    element.addClass('bar-positive');
                    break;
                default :
                   ...