JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp new">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric new">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric new">Acrylic (Transparent)</td>
      <td>25</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric new">Plywood (Birch)</td>
      <td>50</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric new">Laminate (Gold on Blue)</td>
      <td>10</td>
      <td>$2.35</td>
    </tr>
  </tbody>
</table>

CSS

.new{
    width: 100%
}