JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<md-grid-list ng-app="app" layout-fill flex md-cols-sm="1" md-cols-md="2" md-cols-gt-md="5" md-row-height-sm="100%" md-row-height="600px" md-gutter="8px">
  <md-grid-tile ng-repeat="i in [1,2,3,4,5] track by $index">
    <md-card layout-fill layout-padding>
      <md-card-title>
        <md-card-title-text>
          <span class="md-headline">Resource Title</span>
          <span class="md-subhead">Resource Subtitle</span>
        </md-card-title-text>

        <md-card-title-media>
          <div class="md-media-lg card-media">
            <img ng-src="http://lorempixel.com/600/400/technics/{{$index + 1}}" alt="" />
          </div>
        </md-card-title-media>
      </md-card-title>

      <md-card-content>
        <p>It is a <a href="#">long established fact</a> that a reader will be distracted by the readable content of a page when looking at its layout.</p>

        <h4>More Ipsums</h4>

        <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
      </md-card-content>

      <md-card-actions layout="row" layout-align="end center" class="layout-align-end-center layout-row">
        <a href="#">
          <i class="glyphicon glyphicon-file text-bigger"></i> More Related
          <i class="glyphicon glyphicon-chevron-right"></i>
        </a>
      </md-card-actions>
    </md-card>
  </md-grid-tile>
</md-grid-list>

JavaScript

angular.module('app', ['ngMaterial']);