JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <input type="password" class="password" name="pass" id="password-1"><br />
    <input type="password" class="password" name="pass-2" id="password-2">
    <span class="password-confirm"></span><br />
    <input type="email" class="email" name="email">
  </body>

CSS

.blur{border: 1px solid #7dc855;outline: none; }

.focus{border: 1px solid red;outline: none;}

:focus{border: 1px solid orange; }

JavaScript

$('#password-2').blur(function() {
$("#password-confirm").empty();
		var txt2 = "Please enter the same password";
		var newDiv2 = $('<div></div>').text(txt2);
		
		   if($('#password-1').val() != $('#password-2').val()) {
		  $(this).removeClass("blur").addClass("focus");
		
		$('.password-confirm').append(newDiv2);
            // Prevent form submission
            event.preventDefault();
        } else {
			
			 $(this).removeClass("focus").addClass("blur");
			  	//$("#password-confirm").empty();						  
				}
							   })