JSFiddle - React, Tailwind, and code Playground
HTML
<form action="">
<input
id="icons_txt"
type="text"
name="icon"
required
title="National Insurance Number is not in the correct format"
value=""
pattern="^(?!BG)(?!GB)(?!NK)(?!KN)(?!TN)(?!NT)(?!ZZ)(?:[A-CEGHJ-PR-TW-Z][A-CEGHJ-NPR-TW-Z])(?:\s*\d\s*){6}([A-D]|\s)$"/>
<input type="submit" class="submit">
</form>
CSS
input[type="text"] {
padding: 10px;
display: inline-block;
width: 200px;
text-transform: uppercase;
}
form {
margin: 20px;
}