Material Outline 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 mdc-text-field--outlined" style="width: 100%">
        <input type="text" id="tf-outlined-registered" class="mdc-text-field__input">
        <div class="mdc-notched-outline">
          <div class="mdc-notched-outline__leading"></div>
          <div class="mdc-notched-outline__notch">
            <label for="tf-outlined-registered" class="mdc-floating-label">Registered by</label>
          </div>
          <div class="mdc-notched-outline__trailing"></div>
        </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 mdc-text-field--outlined" style="width: 100%">
        <input type="text" id="tf-outlined-date" class="mdc-text-field__input">
        <div class="mdc-notched-outline">
          <div class="mdc-notched-outline__leading"></div>
          <div class="mdc-notched-outline__notch">
            <label for="tf-outlined-date" class="mdc-floating-label">Date</label>
          </div>
          <div class="mdc-notched-outline__trailing"></div>
        </div>
      </div>
    </div>

    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
      <textarea id="premiumskinsandicons-material-outline"></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-outline',
  skin: 'material-outline',
  content_css: 'material-outline',
  icons: 'material',
  plugins: 'code image link lists',
  toolbar: 'undo redo | styles | bold italic underline forecolor backcolor | link image code | align | bullist numlist',
  menubar: false
});