JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<body ng-app="wcgUiRouterApplication">

<!-- Simple Navigation Bar -->
<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">WebCodeGeeks AngularJS UI-Router Example</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref="posts">Posts</a></li>
        <li><a ui-sref="authors">Authors</a></li>
    </ul>
</nav>

<div class="container">

    <!-- ui-view attribute is the indicator where to inject the views managed by AngularJS UI-Router -->
    <div ui-view></div>

</div>

</body>

JavaScript

var wcgUiRouterApplication = angular.module('wcgUiRouterApplication', ['ui.router']);

wcgUiRouterApplication.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/posts');
    
    $stateProvider
        .state('posts', {
            //  Posts state. This state will contain nested views
            url: '/posts',
            template: '<div class="jumbotron text-center">    <h1>Posts page</h1>    <p>This page shows a list of posts and it is intended to show the use of Nested Views.</p>      <a ui-sref=".list" class="btn btn-primary">List</a>    <a ui-sref=".info" class="btn btn-info">Information</a> </div><div ui-view></div>'
        })
         .state('posts.list', {
         // Posts list state. This state is child of posts state
         url: '/list',
         template: '<ul>   <li ng-repeat="post in posts">       {{post.id}} - {{post.name}}   </li></ul>',
         controller: ['$scope', function($scope) {
            $scope.posts = [
               {id: 1, name: "WCG Post 1"},
               {id: 2, name: "WCG Post 2"},
               {id: 3, name: "WCG Post 3"},
               {id: 4, name: "WCG Post 4"},
               {id: 5, name: "WCG Post 5"},
            ]    
         }]
     })
     .state('posts.info', {
         // Posts info state. This state is child of posts state
         url: '/info',
         template: 'Posts information. We are using directly a string template instead of a url linking to a template.'
     })
        .state('authors', {
         // Authors state. This state will contain multiple views
         url: '/authors',
         views: {
            // Main template. It will be placed in the ui-view of the index.html file when /authors url is visited (relatively named)
            '': { template: '<div class="jumbotron text-center"><h1>Authors page</h1><p>This page shows a list of popular and recent authors and it is intended to show the use of Multiple Views.</p></div><div class="row">   <!--...