JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div ng-app>
<div class="container-fluid">
      <div class="row">
        <!-- Player section -->
        <div class="col-sm-8" ng-controller="playerCtrl">
          <table class="table table-hover">
            <tr>
              <th>Play</th>
              <th>Topic</th>
              <th>Date</th>
              <th>Presenter</th>
              <th>Tags</th>
            </tr>

            <tr ng-repeat="column in columns">
   
              <td>{{topic.topic}}</td>
              <td>{{topic.date}}</td>
              <td>{{topic.presenter}}</td>
                <td ng-repeat="tag in column.cards">
                    <span class="badge">{{topic.tags}}</span>
                </td>
            </tr>
          </table>
        </div>
</div>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

function playerCtrl($scope) {

  $scope.columns =        [ 
        {
            "id" : 0,
            "column_name" : "Column 1",
            "cards" : [ 
                {
                    "id" : 0,
                    "task" : "Task 1"
                }, 
                {
                    "id" : 1,
                    "task" : "Task 2"
                }
            ]
        }, 
        {
            "id" : 1,
            "column_name" : "Column 2",
            "cards" : [ 
                {
                    "id" : 0,
                    "task" : "Task 3"
                }
            ]
        }]    ;




}