JSFiddle - React, Tailwind, and code Playground
HTML
<form action="add_user.html" method="post" name="signup"
class="signup" target="spotx_signup_frame"
onSubmit="if(checkPassword() && checkTandC()) return true; else return false;">
<input type="hidden" name="signup_type" value="publisher"/>
<table cellspacing="5" cellpadding="0" width="100%">
<tr>
<td colspan="2">
<p class="instructions">Please fill out all of the information below.
<br />
<span class="required">All fields are required.</span>
</p>
</td>
</tr>
<tr>
<td colspan="2">
<h3>Your Details</h3>
<p class="instructions">Please fill in all fields</p>
</td>
</tr>
<tr>
<td width="50%">
<label for="company"> Company Name: </label>
</td>
<td width="50%">
<input name="contact[company]" maxlength="75"
spx_required="true" id="company"/>
</td>
</tr>
<tr>
<td>
<label for="givenName"> First Name:</label>
</td>
<td>
<input name="contact[givenName]" maxlength="75"
spx_required="true" id="givenName"/>
</td>
</tr>
<tr>
<td>
...
CSS
@import url("https://api.spotxchange.com/resources/layout/default/western/_default_.css");
html body {
background: white;
font:normal 16px calibri,helvetica,arial;
line-height: 1.4em;
color: #808080;
}
.signup {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 7px 0 8px;
position: relative;
float: left;
padding: 0;
width: 640px;
font-size: 12px;
line-height: 1.4em;
}
.signup input, .signup select, .signup textarea {
font-size: 12px;
width: 200px;
padding:2px;
height:20px;
color:#707070;
border:solid 1px #D2D2D2;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.signup select {
width:206px;
}
.signup textarea {
padding:2px;
resize: none;
}
.signup input.toggle_input_text {
margin-bottom:5px;
padding-left:25px;
width:175px;
background:url('/images/help_text_arrow.png') no-repeat 6px 3px;
}
.instructions {
}
.instructions_item {
font-style:italic;
color:#bbb;
}
span.required {
color:red;
}
.input-field {
display:none;
}
}