JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

CSS

.support-ticket-form{
  background-color: #ebebeb;
  padding: 40px;
  font-family: helvetica, serif;
  font-size: 13px;
}
.support-ticket-form > table{
  background-color: #fff;
  border: solid 19px #fff;
}
.support-ticket-form > table th{
  font-size: 21px;
  text-align: left;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEHUlEQVRogdWZa4iWRRTHf2qhBl4iRIMgFQ2FDC+oEBiGd1CJUPCDiphXENNMYfWDioWilPdVvAQRaRd1EUTFwOu6Il4TUSuhoNVIu4imK7b6yiznWYbZmXlm3ufZdf3DAffxnDP/M3Nm3jNn0DAR+Ipni/5AKVAJ3AUKwEXghTRW40RZyVng3QYO4y1gj8ZBlxFpxlMdhlMbhjvvAA8t46tvvUMc7HMEoOQHoG09kn/VM3aXUCfNgF88jlQ+jq8H8k2Ac5bx/gb6xTrr5wkgkaUSbF4YZRmjKjRtbJgREMRVoGtOAWw2fP8JdM7qtCIgCLW52mUcR6XPz5bJicEk4Iip3xL4NyCI6RkDeBmoNnxWy6YOwTCxedTUUK6SyNLQPmMATYSADrW/3g6w7QsclH//6FJambICJzMGgCNdP0uxGWTon/Yp/54SxOIM5FsAZyw+L3pshlp+8Fb5BnkduJcSxPwiAzjr8XkJ2CK/PW+Ifi+H7mtpA3UApgFLgFMOJwsiyZcHHBK6/Ob4vruYmVvscDY3wFZt0v2R5F1yM2T2XZjvcFqSYnciJ/K3gU7Fkk/wcWQQx3MiXwa0yUo+wUeBQcSmjSrwjsqF5ras3KfAkLyI61joIDFLdL6LJL9f891Kjtt6R4mDzE+R5A80BFkXXCsRKjufJfkE87SLeIzsaQzkE1x+nslviST/fSPgXIsdkeS3NhLeNfgmkvylRsC5Fl8WsWnvyobPBVm6DOuLbH41l9r+kVSmCiOB94HBgLol/pqBVxBiN+x5x/dvLZf7gpQpuaG1UUBtiiS/VuzmRNplSrPRwBq59t0TqZBWY5bTZhHwOML+w1ji3YDDGUoCXdY7xvha06mS295Gj585oeT75ERcyWrPONc0Pb30Huvxl3pt7Q78ZxhtB5ZJH6aHzNS2APKfeMYZkbJKk4tdiSOG8jaP7izPICtSJmqpxWasoePr0VqDeFNTeBLY75ltabksC7D73EFsgqE3xhNEnVaOnhY3Akgk0EuIvYE2QzzEZhi6wemk1/DlhEOfzcMRdvM8xMYYukHp9L98qI7s/XfXzvQ7UiKEwtXVKMhraehKTEH747HUKKEYIHtG2f4DvBhhi6erYUunDxx6qlda8waWfLgSQaBUszsVST6BL50mG7oztWzRpebcTj5URgxeptl5u8QpcHU1Cpa3CrPtr1qMNQ1c/eOhgKfVXcZsDMwQACkroaeT+Rhe+yD4hfEfxxxNJZXn6wzdgxa9vINYJ3doPfeH68YvWdrYt6SOf09mWFWjfxg69+W5KC/40kkX6zvyK8D1QAdK/pLqNW/4VqIgp58T6izfADxIcaK6EB3rgXwCWxB10sYHtbHV5UNdYC7Ia6DqGC+XH7CGgCoaVVqrSkE1zHrWGRR4CtcJWeb2OFztAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: 5px 40px;
  background-size: 24px;
  padding-left: 40px;
  border-bottom: 4px solid #eee;
  padding-top: 40px;
}
.support-ticket-form...

JavaScript

function SupportTicket(){

	var t = this;
  
  t.ui = $('<form class="support-ticket-form" enctype="multipart/form-data" method="post" target="/support-ticket/uploader/"><table width="100%" border="0" cellspacing="0" cellpadding="10"> <tbody data-id="requestor-information"> <tr> <th colspan="4" scope="col">Requestor Information</th> </tr><tr> <td>Client Name:</td><td><input type="text" name="ticket-client-name" required /></td><td>Ticket Date:</td><td><input type="date" name="ticket-date" required /></td></tr><tr> <td>Ticket Created By:</td><td><input type="text" name="ticket-created-by" required /></td><td>Originating Facility:</td><td><select name="ticket-originating-facility" required ><option value="---">---</option></select> </td></tr><tr> <td>Your Phone #:</td><td><input type="tel" name="ticket-creator-phone-number" required /></td><td>Your Contact Email:</td><td><input type="email" name="ticket-creator-email" required /></td></tr><tr> <td colspan="2">Are you submitting this request for yourself?</td><td><label><input type="radio" name="ticket-for-self" value="Yes" checked/> Yes</label></td><td><label><input type="radio" name="ticket-for-self" value="No"/> No</label></td></tr></tbody> <tbody data-id="support-request-person" style="display:none;"> <tr> <th colspan="4" scope="col">Person Requiring Support (if other than you)</th> </tr><tr> <td>First Name:</td><td><input type="text" name="ticket-person-firstname"/></td><td>Last Name:</td><td><input type="text" name="ticket-person-lastname"/></td></tr><tr> <td colspan="2">If currently a Client Portal User, enter their name here and verify:</td><td colspan="2"><input type="text" name="ticket-person-verified"/></td></tr></tbody> <tbody data-id="support-request-type"> <tr> <th colspan="4" scope="col">Support Request Type</th> </tr><tr> <td colspan="2">Request Type:</td><td colspan="2"><select name="ticket-request-type" required><option value="" selected>Select..</option><option value="New User Account">New User...