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" 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" 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" 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" 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 | styleselect | bold italic underline forecolor backcolor | link image code | align | bullist numlist',
  menubar: false
});