JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="ucmgmt">
    <div ng-controller="appsCtrl">
        <table class="tg">
            <tr>
                <th class="tg-031e">Appname</th>
                <th class="tg-yw4l">Sitename</th>
                <th class="tg-yw4l">Rule</th>
                <th class="tg-yw4l">ServerName</th>
                <th class="tg-yw4l">Status</th>
            </tr>
            <tbody ng-repeat="item in data">
                <tr ng-repeat="app in item">
                    <td class="tg-yw4l">{{app.appname}}</td>
                    <td class="tg-yw4l">{{app.sitename}}</td>
                    <td class="tg-yw4l">
                        <ul>
                            <li ng-repeat="rule in app.rules">
                                <input ng-model="rule.check" ng-click="process(app)" type="checkbox" value="{{rule.name}}">{{rule.name}}</li>
                        </ul>
                    </td>
                    <td class="tg-yw4l">
                        <ul>
                            <li>
                                <input ng-click="check = !check; process($index)" type="checkbox" value="SERVER1">SERVER1</li>
                            <li>
                                <input ng-click="check = !check" type="checkbox" value="SERVER2">SERVER2</li>
                        </ul>
                    </td>
                    <td class="tg-yw4l">
                        <ul>
                            <li>NA</li>
                            <li>NA</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

.tg {
    border-collapse:collapse;
    border-spacing:0;
}
.tg td {
    font-family:Arial, sans-serif;
    font-size:14px;
    padding:10px 5px;
    border-style:solid;
    border-width:0px;
    overflow:hidden;
    word-break:normal;
    border-top-width:1px;
    border-bottom-width:1px;
}
.tg th {
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    padding:10px 5px;
    border-style:solid;
    border-width:0px;
    overflow:hidden;
    word-break:normal;
    border-top-width:1px;
    border-bottom-width:1px;
}
.tg .tg-yw4l {
    vertical-align:top
}
ul {
    list-style-type: none;
    margin: 0;
}

JavaScript

angular.module('ucmgmt', [])
    .controller('appsCtrl', function ($scope) {
    $scope.data = {
        "applications": [{
            "appname": "maps",
                "sitename": "maps.example.com",
                "rules": [{
                "name": "External_Under_Construction"
            }, {
                "name": "Internal_Under_Construction"
            }]
        }, {
            "appname": "bing",
                "sitename": "bing.example.com",
                "rules": [{
                "name": "Bing_Under_Construction",
                "check": false
                }]
        }]
    };
    $scope.process = function (app) {
        console.log("item is checked." + app);
    };
})