JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script src="http://ckeditor.com/apps/ckeditor/3.6.1/ckeditor.js"></script>
<script src="http://ckeditor.com/apps/ckeditor/3.6.1/_source/lang/_languages.js"></script>
<link rel="stylesheet" href="http://ckeditor.com/sites/default/files/css/CKEditor/css_25e321ae4e71d33b72d7201af12715e1.css">
<form id="form1">
    <p>
        
    <label for="ckeditor">ckeditor:</label><br />(normally hidden textarea)
    <textarea id="ckeditor" class="required"></textarea> 
    </p>
    <input id="submit" class="submit" type="submit" value="Submit"/>
</form>

CSS

textarea.error,span.error { border: 1px solid red!important;} 

textarea{ visibility:visible!important; display:block!important; opacity:.2;}

JavaScript

$(document).ready(function(){ 
     $("#form1").validate(); 
     CKEDITOR.replace("ckeditor",{ toolbar: 'Basic' });  
     $("#submit").click(function(){
         for (var i in CKEDITOR.instances) {
            CKEDITOR.instances[i].updateElement();
         }
         setTimeout(function(){
             var ta=$("#ckeditor");
             var cke=$("#cke_ckeditor");
             if (ta.hasClass('error') ){cke.addClass('error')}
             else{cke.removeClass('error')}
         },300);
         return true;
    });
 });