JSFiddle - React, Tailwind, and code Playground

by jheimpel

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="topic in topics">
                <td><a ng-href="#/{{topic.url}}"><i class="fa fa-play"></i></a></td>
              <td>{{topic.topic}}</td>
              <td>{{topic.date}}</td>
              <td>{{topic.presenter}}</td>
                <td ng-repeat="tag in topic.tags">
                    <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.topics = [
   {
       "url": "testurl",
    "play": "play",
    "topic": "topic 1",
    "date": "date 1",
    "presenter": "presenter 1",
    "tags": ["tag one","tag two"],
  },
    {
        "url": "testurl2",
    "play": "play",
    "topic": "topic 2",
    "date": "date 2",
    "presenter": "presenter 2",
    "tags": ["tag 3 ","tag 4"],
  }     
                  
    ];
    
}