JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<div ng-app="app" ng-controller="dummy">
<div ng-repeat="data in myData">
    <div>{{data.description}}</div>
    <div ng-if="data.reasons">
    	<div ng-repeat="reason in data.reasons" style="margin-left:15px;">
        	<div  style="background-color: #ff0000">{{reason.description}}</div>
          <div ng-if="reason.reasons">
    	<div ng-repeat="reason in reason.reasons" style="margin-left:15px;">
        	<div style="background-color: #ff0">{{reason.description}}</div>
        </div>
    </div>
        </div>
    </div>
</div>

JavaScript

var app = angular.module("app", []);
app.controller('dummy', function($scope) {
        $scope.myData = [
    	  {
          "description":"This is reason 1",
          "reasons":[
          {
          	'description':"This is sub reason 1",
            "reasons":[
            {
            	'description':"This is sub reason 11",
              'reasons':[
              {
              	'description':"This is sub reason 111",
                'eventCode':'#222'
              }
              ]
            }
            ]
          }
          ]
        },
        {
          "description":"This is reason 2",
          "reasons":[
          {
          	'description':"This is sub reason 2",
            "reasons":[
            {
            	'description':"This is sub reason 21",
              'reasons':[
              {
              	'description':"This is sub reason 211",
                'eventCode':'#222'
              }
              ]
            }
            ]
          }
          ]
        },
        {
          "description":"This is reason 3",
          "reasons":[
          {
          	'description':"This is sub reason 3",
            'eventCode':'#222'
          }
          ]
        }
        ];  

      });