JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div github-repos github-user='angular'></div>
<div github-repos></div>

SCSS

body {
    font-family: "HelveticNeue", sans-serif;
    font-size: 14px;
    padding: 20px;
}

a {
    color: #333;
    text-decoration: none;
}

.github-repos {
    float: left;
    width: 260px;
    h1 {
        color: #999;
        font-weight: bold;
        padding-bottom: 10px;
    }
}

.github-repo {
    border-top: 1px solid #ccc;
    display: block;
    padding: 10px 0;
    width: 240px;
}

.github-repo__name {
    color: #6483C4;
    font-weight: bold;
    font-size: 16px;
}


.github-repo__full-name {
    color: #ccc;
    font-size: 12px;
}


.github-repo__description {
    font-size: 14px;
    padding: 5px 0;
}

.github-repo__created {
    color: #ccc;
    font-size: 10px;
}

CoffeeScript

github = angular.module('github', [])

github.directive 'githubRepos', ->
  postsTemplate = """
    <div class='github-repos ng-cloak'>
      <h1>
        Public repos
        <span ng-show="githubUser">for {{ githubUser }}</span>
      </h1>
      <a class='github-repo' href='{{ repo.url }}' ng-repeat='repo in repos'>
        <h3 class='github-repo__name'>{{ repo.name }}</h3>
        <h4 class='github-repo__full-name'>{{ repo.full_name }}</h4>
        <div class='github-repo__description' ng-show='repo.description'>
          <p>{{ repo.description }}</p>
        </div>
        <time class='github-repo__created'>{{ repo.created_at | date:'mediumDate' }}</time>
      </a>
    </div>
  """
  return {
    restrict: 'A'
    replace: true
    template: postsTemplate
    scope: {
      githubUser: '@'
    }
    controller: ($scope, githubProvider) ->
      $scope.repos = []
      
      if $scope.githubUser
        githubProvider.userRepos($scope.githubUser).success (rsp) ->
          $scope.repos = rsp.data
      else
        githubProvider.repos().success (rsp) ->
          $scope.repos = rsp.data
  }

github.factory 'githubProvider', ($http) ->
  protocol = "https://"
  domain = 'api.github.com'
  path   = ''

  endpoint = ->
    return "#{protocol}#{domain}#{path}"

  params = ->
    return "?callback=JSON_CALLBACK"

  userRepos = (user) ->
    return $http.jsonp("#{endpoint()}/users/#{user}/repos#{params()}")
  repos = ->
     return $http.jsonp("#{endpoint()}/repositories#{params()}")
  return {
    userRepos: userRepos
    repos: repos
  }
    
angular.element(document).ready ->
  angular.bootstrap(document, ["github"])