JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="body"  ng-controller="MyController">
    <table>
        <tbody>
          <tr class="row" ng-repeat="rule in data" fw-rule="rule">
          </tr>
        </tbody>
    </table>

    <script type="text/ng-template" id="template.html">
        <td><input type="checkbox" /></td>
        <td ng-click="isEditing=!isEditing">{{ fwRule.name }}<br><span class="rule-description">{{ fwRule.description }}</span></td>
        <td>{{ fwRule.source }}</td>
        <td>{{ fwRule.destination }}</td>
        <td>{{ fwRule.protocol }}</td>
        <td>{{ fwRule.schedule }}</td>
        <td>{{ fwRule.action }}</td>
        <td>{{ fwRule.reporting }}</td>
    </script>
</div>

CSS

#hasPopover {
    height:50px;
    background-color: red;
}

tr{
    border:1px solid red;
    padding:10px;
    background-color:grey;
}

table{
    border:1px solid black;
}

td{
    border:1px solid black;
}
}

JavaScript

var app = angular.module('app', []);

app.controller('MyController', function ($scope, $templateCache) {
  
    $scope.data = [{
        name: 'rule name',
        description: 'description',
        source: 'source',
        destination: 'destination',
        protocol: 'protocol',
        schedule: 'schedule',
        action: 'action',
        reporting: 'reporting'
    },{
        name: 'rule name',
        description: 'description',
        source: 'source',
        destination: 'destination',
        protocol: 'protocol',
        schedule: 'schedule',
        action: 'action',
        reporting: 'reporting'
    }];
    
    $scope.rule = $scope.data[0];
});

app.directive('fwRule', function ($templateCache, $timeout, $compile) {
    return {
        restrict: 'A',
        scope: {
            fwRule: '='
        },
        controller: function ($scope) {},
        link: function ($scope, element, attrs) {
            var template = $templateCache.get('template.html');

            angular.element(element).html(template);
            $compile(element.contents())($scope);
        }
    };
});


//bootstrap the application
angular.bootstrap(document.getElementById('body'), ["app"]);