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" class="mdc-text-field__input">
                <label class="mdc-floating-label" for="my-text-field">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" class="mdc-text-field__input">
                <label class="mdc-floating-label" for="my-text-field">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>