JSFiddle - React, Tailwind, and code Playground
HTML
<form name="myForm">
<legend>Customer Information</legend>
<fieldset id="custInfo">
<article id="errorFName"></article>
<article id="errorLName"></article>
<article id="errorAddress"></article>
<article id="errorCity"></article>
<article id="errorState"></article>
<article id="errorZip"></article>
<article id="errorUsername"></article>
<article id="errorPassword"></article>
<article id="errorAgreement"></article>
<article id="passwordMatchMessage"></article>
<label id="firstNameLabel" for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName" />
<label type="text" for="middleInitial">Middle Initial:</label>
<input name="middleInitial" id="middleInitial" size="2" />
<label id="lastNameLabel" for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName"
placeholder="Last Name"/>
<label id="streetAddressLabel" for="streetAddress">Street Address:</label>
<input name="streetAddress" id="streetAddress" />
<label id="cityLabel" for="city">City:</label>
<input type="text" name="city" id="city" placeholder="Tulsa"/>
<label id="stateLabel" for="state">State:</label>
<input type="text" name="state" id="state" placeholder="OK"/>
<label id="zipLabel" for="zip">Zip Code:</label>
<input name="zip" id="zip"
placeholder="xxxxx (-xxxx)"/>
<label id="usernameLabel" for="username">Username:</label>
<input name="username" id="username"
placeholder="username"/>
<label id="passwordLabel" for="password">Password:</label>
<input type="password" name="password" id="password"
placeholder="password"/>
<label id="confirmPasswordLabel" for="confirmPassword">Password Confirmation:</label>
<input type="password"...
CSS
input {
border:1px solid red
}
JavaScript
$("input").focus(function(){
$(this).css("border","1px solid black")
})