JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div class="holidayList" ng-app="myApp" ng-controller="myController" ng-init="init()"> 
                    <div class="holidayListHeader"><h4>Holiday List 2017</h4></div>
                    
                        <table ng-repeat="list in holidayList">
                            <thead>
                                <tr>
                                    <th>{{list.month}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{list.date}}</td>
                                    <td>{{list.day}}</td>
                                    <td>{{list.occasion}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

CSS

.holidayList table{
        margin:4%;
    }

JavaScript

var app=angular.module('myApp',[])
app.controller('myController', ['$scope', '$http', function ($scope, $http) {
    $scope.init = function () {

$scope.holidayList=[
             {
                'month':'JAN',
                'date':01,
                'day': 'Mon',
                'occasion':'New Year'
            },
             {
                'month':'FEB',
                'date': 03,
                'day': 'Fri',
                'occasion':'Maha Shivaratri'
            }

        ];
}
}])