JSFiddle - React, Tailwind, and code Playground

by shubham_Rocko_96

HTML

<textarea class="relative-box spell-checker" id="spell-checker" after-word="190" word-count="20" focus-out=true>
          some incorect text Heer 1
        </textarea>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS

.relative-box {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #05b8ac; }

JavaScript

$().ready(function() {
  var inputFields = $(".spell-checker").toArray();
  inputFields.forEach(inputData => {
    var div = document.createElement("div");
    div.style = inputData.style;
    div.innerHTML = inputData.innerHTML;
    div.className = inputData.className;
    div.id = inputData.id;
    inputData.getAttributeNames().forEach(attr => {
      $(div).attr(attr, inputData.getAttribute(attr));
    });
    div.attributes = inputData.attributes;
    $(div).prop("contentEditable", true);
    inputData.style.display = "none";
    inputData.parentElement.appendChild(div);
  });
});