JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<div class="wFormContainer"  >

  <div class=""><div class="wForm" id="tfa_0-WRPR" dir="ltr">
  
<div class="codesection" id="code-tfa_0"></div>

<!-- Updated to SF -->
<!-- FORMASSEMBLY form method="post" action="https://www-forms.rmit.edu.au/responses/processor" class="hintsBelow labelsAbove" id="tfa_0" -->

<form id='salesforceform' action="https://rmitheda--rmqa.cs76.my.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" class="hintsTooltip labelsRightAligned">



<!-- hidden fields -->
<!--<input type=hidden name="oid" value="00D280000015MVW">-->
<input type=hidden name="oid" value="00D9D0000008aIr">
<input type=hidden name="retURL" value="https://www.rmit.edu.au/industry/contact/thank-you">
<input type=hidden name="Status" value="Requested">
<input type=hidden name="recordType" id="recordType" value="01228000000pgC1">
<input type=hidden name="lead_source" value="Industry Portal">
<input type=hidden name='captcha_settings' value='{"keyname":"TestEnvKeyPair","fallback":"true","orgId":"00D9D0000008aIr","ts":""}'>
<!-- end hidden fields -->

<fieldset id="tfa_28" class="section">
<legend id="tfa_15-L"><span class="step_count">1</span> Add your details</legend>

<div class="formrow">
<div class="column">

<!-- add salutation -->
<div id="tfa_19-D" class="oneField    ">
<label id="tfa_19-L" for="tfa_19" class="label preField " style="width: 80px; min-width:0">Title</label><br>
<div class="inputWrapper halfcol selectbox kickdown">
<select  id="title" name="salutation"><option value="">Please select...</option><option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Assoc. Prof">Assoc. Prof</option>
<option value="Other">Other</option>
</select>
</div>
</div>
</div>
<div class="column">
</div>
</div>

<div class="formrow">
<div class="column">

<!-- name is now first name -->
<div id="tfa_1-D" class="oneField   ...

CSS

* {
  box-sizing: border-box;
}

.wFormContainer {
  margin-top: 50px;
}

/* Create three equal columns that floats next to each other */

.column {
  float: left;
  width: 49%;
  padding: 0px;

  /* height: 90px;
   Should be removed. Only for demonstration */
}

.column:nth-child(even) {
  margin-left: 2%;
}


.halfcol {
  width: 50%;
}

.step_count {
  background-color: #000;
  width: 32px;
  height: 32px;
  display: inline-block;
  border-radius: 16px;
  text-align: center;
  line-height: 32px;
  color: #fff;
}


/* Clear floats after the columns */

.formrow::after {
  content: "";
  display: table;
  margin-left: 1px;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width:1000px) {
  .column {
    width: 100%;
    margin: 0 !important;
  }
}

@media screen and (max-width:750px) {
  fieldset {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  legend {
    margin-left: 0 !important;
  }

  input[type=submit] {
    margin-right: 0 !important;
  }
}

.lbe_container {
  display: block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 30px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: normal;
  color: #333;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */

.lbe_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: -2px;
  left: 0;
  height: 28px;
  width: 28px;
  background-color: #f0f0f0;
  border-radius: 3px;
  border: solid 2px #646464;
}

/* On mouse-over, add a grey background color */

.lbe_container:hover input ~ .checkmark {
  background-color: #f0f0f0;
}

/* When the checkbox is checked, add a blue background */

.lbe_container input:checked ~ .checkmark {
  background-color: #f0f0f0;
}

/*...