JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://dojotoolkit.org/documentation/tutorials/1.8/populating_datagrid/demo/style.css">
<link rel="stylesheet" href="http://dojotoolkit.org/documentation/tutorials/resources/style/demo.css">

		<script>dojoConfig = {parseOnLoad: true}</script>
		<script src='https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js'></script>
		<script src="sampleForm.js"></script>
	
		<body class="claro borderClass">
		<form  id="sampleForm" data-dojo-attach-point="_sampleForm">
			
			<div>
				<label for="firstName">First name</label>
				<input id="firstName" data-dojo-type="dijit/form/ValidationTextBox" 
					data-dojo-props="placeHolder:'First Name' , required:true, missingMessage:'please enter your first name', invalidMessage:'Please enter a valid name'"/>
			</div>
			<div>
				<label for="lastName">Last name</label>
				<input id="lastName" data-dojo-type="dijit/form/ValidationTextBox" 
					data-dojo-props="placeHolder:'Last Name' , required:true , missingMessage:'please enter your last name', invalidMessage:'Please enter a valid name'"/>
			</div>
			<div>
				<label for="dateOfBrith">Date Of Brith</label>
				<input id="dateOfBrith" data-dojo-type="dijit/form/DateTextBox" data-dojo-props="required:true"/>
			</div>
			
			<button data-dojo-type="dijit/form/Button" id="myFormSubmit" type="submit"> Submit </button>
			
		</form>

CSS

.info {
    color: red;
}
.news {
    color: blue;
}

JavaScript

define( ["dojo/_base/declare", "dojo/dom-class", "dojo/query", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/NodeList-dom"], function (declare, domClass, query, _WidgetBase, _TemplatedMixin) {
        var template = [
            '<div>',
            '<a data-dojo-attach-point="linkNode"></a>',
            '</div>'];
        return declare("MyWidget", [_WidgetBase, _TemplatedMixin], {
            templateString: template.join("\n"),
            constructor: function (params, srcNodeRef) {
                console.log("creating widget with params " + dojo.toJson(params) + " on node " + srcNodeRef);
            },
            postCreate: function () {
                console.log(arguments);
                this.inherited(arguments);
                this._setLinkClass();
            },
            // private methods
            _setLinkClass: function () {
                var linkClass = this._calculateLinkClass();
                console.log(linkClass, this.linkNode);
                if (linkClass != "") {
                    query(this.linkNode).addClass(linkClass);
                }
            },
            _calculateLinkClass: function () {
                var linkClass = "";
                if ('information' === this.linkType) linkClass = 'info';
                if ('news link' === this.linkType) linkClass = 'news';
                return linkClass;
            },
            // Attributes
            link: "empty",
            _setLinkAttr: {
                node: "linkNode",
                type: "innerHTML"
            }
        });
    });