JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<h3>Register your Infragistics Ultimate bundle</h3>
    <form>
        <div class="group-fields">
            <label for="firstName">First Name</label>
            <input id="firstName"></input>
        </div>
		<div class="group-fields">
			<label for="lastName">Last Name</label>
			<input id="lastName"></input>
		</div>
		<div class="group-fields">
			<label for="email">Email</label>
			<input id="email"></input>
		</div>
        <div class="group-fields">
            <label for="password">Password</label>
            <input id="password"></input>
        </div>
        <div class="group-fields">
            <label for="note">Note (Optional)</label>
            <div id="note"></div>
        </div>
        <div class="group-fields">
            <input id="readonly"></input>
            <label for="readonly" id="lock" class="inline">Lock for editing</label>
        </div>
        <input id="btn" type="button" value="Clear"></input>
    </form>

CSS

h3 {
            font-size:20px;
            margin-bottom:20px;
        }
        .group-fields {
            margin-bottom: 10px;
        }
        .group-fields label {
            display: block;
            line-height:18px;
        }
        .group-fields .inline {
            display:inline;
        }
        .group-fields .ui-igcheckbox-normal {
            margin-right: 5px;
            float: left;
        }
        .group-fields .ui-igedit-container {
            width: 250px;
        }
        @media screen and (min-width:360px) {
            .group-fields .ui-igedit-container {
                width: 300px;
            }
        }

JavaScript

$(function () {
        	$("#firstName").igTextEditor({
        		placeHolder: "John",
        	});
        	$("#lastName").igTextEditor({
        		placeHolder: "Anderson",
        	});

            $("#email").igTextEditor({
            	placeHolder: "[email protected]",
            	validatorOptions: {
            		email: true
            	}
            });

            $("#password").igTextEditor({
            	textMode: "password",
            	placeHolder: "********"
            });

            $("#note").igTextEditor({
                textMode: "multiline",
                height: 100,
                visibleItemsCount: 5
            });

            $('#readonly').igCheckboxEditor({
                valueChanged: function (evt, ui) {
                    if (ui.newState == true) {
                        $("#note").igTextEditor("option", "readOnly", true);
                    }
                    else {
                        $("#note").igTextEditor("option", "readOnly", false);
                    }

                }
            });
            $('#lock').igNotifier({
                direction: "top",
                showOn: "mouseenter",
                state: "info",
                showIcon: true,
                locale: {
                    infoMsg: "Checking this will make the comment area readonly."
                }
            });

            $("#btn").click(function () {
                $("#firstName").igTextEditor("option", "value", "");
                $("#lastName").igTextEditor("option", "value", "");
                $("#email").igTextEditor("option", "value", "");
                $("#password").igTextEditor("option", "value", "");
                $("#note").igTextEditor("option", "value", "");
                $("#readonly").igCheckboxEditor("option", "checked", false);

                $("#note").igTextEditor("option", "disabled", false);
                $("#note").igTextEditor("option", "readOnly", false);
            });
        });