JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.css">
<script src="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.js"></script>
<form id="formx" name="formx">
<p>&nbsp;</p>
<table style="width:200px; margin-left:auto; margin-right:auto">
    <tr>
    <td>
        <select name="SellerDropDownList" id="SellerDropDownList" class="chosen-select" >
	<option value="-1">Select an option</option>
	<option value="1">option one</option>
	<option value="2">option two</option>
	<option value="3">option three</option>
	<option value="4">option four</option>

         </select>
<input id="text1" name="text1" type="text" value="" />
    <input type="button" value="validate" onclick="return $('#formx').valid()"/>
        </td>
    </tr>  
</table>
    
</form>

CSS

.error{
    color:red !important;
}

JavaScript

var config = {
        '.chosen-select': {},
        '.chosen-select-no-results': { no_results_text: 'nothing found!' }
    }
    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }
$.validator.setDefaults({
    ignore: ":hidden:not(select)"
});
$.validator.addMethod("notEqual", function (value, element, param) {
    return this.optional(element) || value != param;
}, "*");

$("#formx").validate({
        rules: {
            SellerDropDownList: {
                notEqual: -1
            },
            text1: {
                required: true,
                minlength: 8
            }
        },
        errorElement: "span",
        wrapper: "span",  // a wrapper around the error message
        errorPlacement: function (error, element) {
            offset = element.offset();
            error.insertAfter(element)
            error.addClass('error');  // add a class to the wrapper

        },
    errorPlacement: function(error, element)
        {
            // Set positioning based on the elements position in the form
            var elem = $(element),
               corners = ['left center', 'right center'],
               flipIt = elem.parents('span.right').length > 0;
            
            // IF this is a select2
            if(elem.is('.chosen-select')) {
                elem = $('#' + elem.attr('id') + '_chosen')
            }
            
            // Check we have a valid error message
            if(!error.is(':empty')) {
                // Apply the tooltip only if it isn't valid
                elem.filter(':not(.valid)').qtip({
                    overwrite: false,
                    content: error,
                    position: {
                        my: corners[ flipIt ? 0 : 1 ],
                        at: corners[ flipIt ? 1 : 0 ],
                        viewport: $(window)
                    },
                    show: {
                        event: false,
                        ready: true
         ...