JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


<main>
  <a href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
    <i class="material-icons">delete</i> Delete
  </a>

  <button href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
    <i class="material-icons">delete</i> Delete
  </button>

  <button href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
    <i class="material-icons">close</i> close
  </button>
</main>

CSS

main {
  
}

i {
  transform: translate(-5px, -1px);
}