JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post" id="fileForm" role="form">
  <div class="form-group">
    <label for="phonenumber"><span class="req">* </span> Phone Number: </label>
    <input required type="text" name="phonenumber" id="phone" class="form-control phone" onkeyup="validatephone(this);" placeholder="not used for marketing" />
  </div>

  <div class="form-group">
    <label for="lastname"><span class="req">* </span> Last name: </label>
    <input class="form-control" type="text" name="lastname" id="txt" onkeyup="Validate(this)" placeholder="hyphen or single quote OK" required />
    <div id="errLast"></div>
  </div>

  <div class="form-group">
    <label for="email"><span class="req">* </span> Email Address: </label>
    <input class="form-control" required type="text" name="email" id="txtemail" placeholder="e.g [email protected]" onchange="email_validate(this.value);" />
    <div class="status" id="status"></div>
  </div>

  <div class="form-group">
    <label for="country"><span class="required">* </span> Country: </label>
    <select name="country" id="selCountry" class="form-control selectpicker" required>
      <option value=" " selected>Please select your country</option>

      <option value="AF">Afghanistan</option>

    </select>
  </div>

  <div class="form-group">
    <label class="control-label"><span class="required">* </span> Sex:</label>

    <div class="radio">
      <label>
        <input type="radio" name="gender" value="yes" /> Male
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="gender" value="no" /> Female
      </label>
    </div>
  </div>


  <input type="checkbox" required name="terms" onchange="this.setCustomValidity(validity.valueMissing ? 'Please indicate that you accept the Terms and Conditions' : '');" id="field_terms">
  <label for="terms">I agree with the <a href="terms.php" title="You may read our terms and conditions by clicking on this link">terms and conditions</a> for...

CSS

body {
  padding-top: 50px;
}

fieldset {
  border: thin solid #ccc;
  border-radius: 4px;
  padding: 20px;
  padding-left: 40px;
  background: #fbfbfb;
}

legend {
  color: #678;
}

.form-control {
  width: 95%;
}

label small {
  color: #678 !important;
}

span.req {
  color: maroon;
  font-size: 112%;
}

JavaScript

< script >
   < script type = "text/javascript" >
   document.getElementById("field_terms").setCustomValidity("Please indicate that you accept the Terms and Conditions");

 < /script>

 function validatephone(phone) {
   var maintainplus = '';
   var numval = phone.value
   if (numval.charAt(0) == '+') {
     var maintainplus = '';
   }
   curphonevar = numval.replace(/[\\A-Za-z!"£$%^&\,*+_={};:'@#~,.Š\/<>?|`¬\]\[]/g, '');
   phone.value = maintainplus + curphonevar;
   var maintainplus = '';
   phone.focus;
 }