JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.4.6/alasql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.2/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.2/xlsx.js"></script>
<div ng-app="myApp" ng-controller="myCtrl"> 
 <button class="btn  btn-xs btn-white" ng-click="downloadReports_xlsx()">Download Excel Report</button>
</div>

CSS

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
 border:0;
 background-color:#fff;
 }
 .nav-tabs > li > a{padding:10px 30px}
  .nav-tabs > li.active {
  border-bottom:3px solid cyan;
  }

.disabled {
    pointer-events:none; 
    opacity:0.6;         
}
.breadcrumb {
        background: #ddd;
        display: inline-block;
        padding: 1px;
        padding-right: 15px;
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
    }

    .breadcrumb li {
        display: inline-block;
        background: white;
        padding: 0;
        position: relative;
        min-width:50px;
        text-decoration: none;
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        margin-right: -13px;
    }

    .breadcrumb li#last {
        -webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
    }

    .breadcrumb li:hover {
        color: white;
        background: #fff;
    }

    /* first link should not have anything cliped on the left side */
    .breadcrumb li:first-child {
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
    }

    .label{
        height: 100%;
        width: 100%;
    }
    
   .disabled {
    pointer-events:none; 
    opacity:0.6;         
}

JavaScript

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
   $scope.dataStatus="pending";//types of status--submitted,pending,inprogress,completed--
   
   $scope.data = [{"category":1,"guestValue":0,"visits":23},{"category":2,"guestValue":96.6,"visits":45},{"category":3,"guestValue":73.2,"visits":65},{"category":4,"guestValue":60.3,"visits":85},{"category":5,"guestValue":52.5,"visits":105},{"category":6,"guestValue":46.6,"visits":125},{"category":7,"guestValue":41.4,"visits":144},{"category":8,"guestValue":37.5,"visits":163},{"category":9,"guestValue":34.4,"visits":179},{"category":10,"guestValue":31.9,"visits":199},{"category":"11-17","guestValue":25.4,"visits":258},{"category":"18-28","guestValue":17,"visits":394},{"category":"29+","guestValue":9.7,"visits":847}];
   
   $scope.downloadReports_xlsx = function (){
   var filename = 'RawData.xlsx'
   alasql('SELECT * INTO XLSX("' + filename + '",{headers:true}) FROM ?', [$scope.data]);
   }
});