JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

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

<div id="container">
  <div id="formContainer">
    <label for="client">Client</label>
    <input id="txtCompanyName" />
  </div>
</div>

CSS

#container {
  width: 100%;
  min-width: 900px;
  max-width: 900px;
  display: inline-block;
}

#formContainer {
  top: 0px;
  left: 0px;
  height: 500px;
  width: 750px;
  padding-top: 15px;
  float: left;
  margin-left: 20px;
}

JavaScript

$(function() {
  $('#txtCompanyName').igTextEditor({
    placeHolder: "Enter Company Name",
    value: "Model Value",
    width: "100%",
    buttonType: "clear",
    textMode : "text",
    maxLength : 32,
    validatorOptions: {
      required: true
    }
  });
});