JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
</head>
<body>
<div id='container'>
    <form>

        <fieldset>
            <legend>Sample Sign Up Form</legend>
            <label for="fname" class="hidden">First Name</label><input id="fname" name="fname"> <br><br>
            <label for="lname" class="accessAid">Middle Name</label><input id="lname" name="mname"></label><br><br>
            <label for="lname" class="accessAid">Last Name</label><input id="lname" name="lname" aria-label="Last Name"></label>

        </fieldset>
    </form>
</div>
</body>
</html>

CSS

body{text-align:center}
#container{width:760px;margin:0 auto; text-align:left ;overflow:hidden}
label {
    display:block;
    margin-bottom:1em;
}
.accessAid {display:block !important; position:absolute !important; top:0 !important; left:-500em !important; overflow:hidden !important; text-align:left !important; text-indent:-9999em !important; line-height:0 !important; width:1px !important; height:1px !important;}
.hidden {position:absolute;left:-10000px; top:auto;width:1px;height:1px; overflow:hidden;}