JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<p> <span>Plan Name:</span>

    <input type="Text" data-bind="value: IntroData.PlanName"></input>
    <br /> <span>Name:</span>

    <input type="Text" data-bind="value: name"></input>
</p>

JavaScript

"use strict";
var stuff = {
    IntroData: {
        PlanName: 'Test'
    },
    name: 'tes2s3t'
};

var validationMapping = {
    IntroData: {
        PlanName: {
            create: function (options) {
                return ko.observable(options.data).extend({
                    required: true
                });
            }
        }
    },
    name: {
        create: function (options) {
            return ko.observable(options.data).extend({
                required: true
            });
        }
    }
};
ko.validation.init({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null,
    grouping: {
        deep: true
    }
}, true);
window.viewModel = ko.validatedObservable(ko.mapping.fromJS(stuff, validationMapping));

ko.applyBindings(window.viewModel);