JSFiddle - React, Tailwind, and code Playground

by isherwood

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">
<div ng-app layout="column" layout-gt-sm="row" class="ng-scope layout-sm-column layout-row">
  <div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index">
    <md-card>
      <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>
  </div>
</div>

JavaScript

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