CSS module + Tailwind CSS

Input.jsx

import { useId } from "@reach/auto-id";
import clsx from "clsx";

import style from "src/components/Input/style.module.css";

export const Input = ({ errorMessage = "", id, label, ...otherProps }) => {
	const inputId = useId(id);
	const inputClassName = clsx(style.input, errorMessage && style.inputError);

	const ErrorMessage = () => {
		return errorMessage ? <p className={style.errorMessage}>{errorMessage}</p> : null;
	};

	return (
		<div className="space-y-1">
			<label htmlFor={inputId}>{label}</label>
			<input id={inputId} className={inputClassName} {...otherProps} />
			<ErrorMessage />
		</div>
	);
};

style.module.css

.label {
	@apply text-sm leading-6 font-medium text-gray-900;
}

.input {
	@apply p-4 bg-gray-100 text-sm leading-6 text-gray-800 border-2 border-gray-300 border-b-solid;
}

.input:hover {
	@apply bg-gray-200 border-gray-600;
}

.input:focus {
	@apply bg-blue-200 border-blue-600;
}

.inputError {
	@apply bg-red-100 border-red-300;
}

.inputError:hover, .inputError:focus {
	@apply bg-red-200 border-red-600;
}

.errorMessage {
	@apply text-red-800 text-xs leading-5;
}