JSFiddle - React, Tailwind, and code Playground

HTML

<input style="background: url(images/find.png) center left no-repeat; padding-left: 20px; padding-top: 2px; padding-bottom: 2px; padding-right: 4px; font-family: Arial, Verdana; color: #EB620E" type="text" id="TextBox1" size="10" />
            <input id="Button1" type="button" value="Search" class="locButton" />

CSS

#TextBox1 {
            outline:none;
            transition: all 0.25s ease-in-out;
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            border-radius:3px;
            -webkit-border-radius:3px;
            -moz-border-radius:3px;
            border:1px solid rgba(0,0,0, 0.2);
            text-transform:capitalize;
        }
        #TextBox1:focus {
            box-shadow: 0 0 3px rgba(156, 190, 247, 1);
            -webkit-box-shadow: 0 0 3px rgba(156, 190, 247, 1); 
            -moz-box-shadow: 0 0 3px rgba(156, 190, 247, 1);
            border:1px solid rgba(99, 134, 189, 0.8);
        }
        .TextBox1Error {
            box-shadow: 0 0 6px rgba(245, 141, 148, 1);
            -webkit-box-shadow: 0 0 6px rgba(245, 141, 148, 1); 
            -moz-box-shadow: 0 0 6px rgba(245, 141, 148, 1);
            border:1px solid rgba(99, 134, 189, 0.8);
        }

JavaScript

var $j = jQuery.noConflict();
                $j(document).ready(function () {
                    $("#Button1").click(function () {
                        var textbox = document.getElementById("TextBox1").value;
                        if (textbox.trim().length == 0)
                            $j("#TextBox1").addClass('TextBox1Error');
                    });
                });