JSFiddle - React, Tailwind, and code Playground

Material Design Lite Cards

by Jennifer Perrin

HTML

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="mdl-card mdl-shadow--2dp demo-card-wide">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris sagittis pellentesque lacus eleifend lacinia...
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
  </div>
  <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="fa fa-share"></i>
    </button>
  </div>
</div>

<hr />

<div class="mdl-card mdl-shadow--2dp demo-card-square">
  <div class="mdl-card__title mdl-card--expand">
    <h2 class="mdl-card__title-text">Update</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aenan convallis.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      View Updates
    </a>
  </div>
</div>

CSS

html, body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  margin: 2%;
  padding: 0;
}

.demo-card-wide.mdl-card {
    width: 512px;
    margin: 0 auto;
}
.demo-card-wide > .mdl-card__title {
    color: #fff;
    height: 176px;
    background: url('http://www.getmdl.io/assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
    color: #fff;
}

.demo-card-square.mdl-card {
    width: 320px;
    height: 320px;
    margin: 0 auto;
  }
  .demo-card-square > .mdl-card__title {
    color: #fff;
    background:
      url('http://www.getmdl.io/assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
  }