JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<body ng-app="blog">
  
  <div ng-controller="blogCtrl">
    <div class="well">
      <button id="btnCompose" class="btn btn-primary" ng-click="composeBtn()">Compose</button>
      <button id="btnPreview" class="btn btn-primary" ng-click="previewBtn()">Preview</button>
      <button id="btnPost" class="btn btn-primary" ng-click="postBtn()">Post</button>
    </div>

    <div id="blogCompose" class="well" ng-show="state.blogCompose">
      <h1>Blog Compose</h1>
    </div>
    <div id="blogPreview" class="well" ng-show="state.blogPreview">
      <h1>Blog Preview</h1>
    </div>
    <div id="blogPost" class="well" ng-show="state.blogPost">
      <h1>Blog Post</h1>
    </div>
  </div>
    
</body>

JavaScript

var demo = angular.module('blog', [])
  .controller('blogCtrl', function($scope) {

    //Defaults, page load
    $scope.state = {};
    $scope.state.blogCompose = true;
    $scope.state.blogPreview = false;
    $scope.state.blogPost = false;

    //Manage state per button
    $scope.composeBtn = function () {
      $scope.state.blogCompose = true;
      $scope.state.blogPreview = false;
      $scope.state.blogPost = false;
    };

    $scope.previewBtn = function () {
      $scope.state.blogCompose = false;
      $scope.state.blogPreview = true;
      $scope.state.blogPost = false;
    };

    $scope.postBtn = function () {
      $scope.state.blogCompose = false;
      $scope.state.blogPreview = false;
      $scope.state.blogPost = true;
    };

  });