Material Classic skin demo

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6" data-mdc-auto-init="MDCTextField">
      <div class="mdc-text-field" style="width: 100%">
        <input type="text" id="my-text-field-registered" class="mdc-text-field__input">
        <label class="mdc-floating-label" for="my-text-field-registered">Registered by</label>
        <div class="mdc-line-ripple"></div>
      </div>
    </div>

    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6" data-mdc-auto-init="MDCTextField">
      <div class="mdc-text-field" style="width: 100%">
        <input type="text" id="my-text-field-date" class="mdc-text-field__input">
        <label class="mdc-floating-label" for="my-text-field-date">Date</label>
        <div class="mdc-line-ripple"></div>
      </div>
    </div>

    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
      <textarea id="premiumskinsandicons-material-classic"></textarea>
    </div>

    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
      <div class="mdc-form-field">
        <div class="mdc-checkbox">
          <input type="checkbox" class="mdc-checkbox__native-control" id="checkbox-1"/>
          <div class="mdc-checkbox__background">
            <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
              <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
            </svg>
            <div class="mdc-checkbox__mixedmark"></div>
          </div>
        </div>
        <label for="checkbox-1">I agree to the <a href="#">Terms and conditions</a></label>
      </div>
    </div>

    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
      <div style="text-align: right;">
        <button class="foo-button mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple">Submit Claim</button>
      </div>
    </div>
  </div>
</div>

<script>
  mdc.autoInit();
</script>

tinymce.init({
  selector: 'textarea#premiumskinsandicons-material-classic',
  skin: 'material-classic',
  content_css: 'material-classic',
  icons: 'material',
  plugins: 'code image link lists',
  toolbar: 'undo redo | styles | bold italic underline forecolor backcolor | link image code | align | bullist numlist',
  menubar: false
});