JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<form id='wFormContainer' action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" class="enquiry-form hintsTooltip labelsRightAligned">
  <input type="hidden" name="oid" value="00D7F000000yg1h">
  <input type=hidden name="retURL" value="https://www.rmit.edu.au/study-with-us/levels-of-study/postgraduate-study/register/success">
  <input type="hidden" name="recordType" value="0127F000000yg3I">
  <input type="hidden" name="lead_source" value="Webform">
  <input type="hidden" id="00N7F00000QiiD8" name="00N7F00000QiiD8" title="Lead Source Detail" value="Returning to study">
  <input type="hidden" id="faq_referer" name="faq_referer" value="">

  <fieldset class="section">
    <h4 class="heading">Contact us</h4>

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

        <div class="oneField   labelsAbove ">
          <label for="first_name" class="reqMark">First name</label>
          <div class="inputWrapper">
            <input type="text" maxlength="80" aria-required="true" required="" class="required" id="first_name" name="first_name" value="" aria-labelledby="tfa_1-L" placeholder="">
          </div>
        </div>
      </div>



      <div class="column">
        <div class="oneField   labelsAbove ">
          <label for="last_name" class="reqMark">Last name</label>
          <div class="inputWrapper">
            <input type="text" maxlength="80" aria-required="true" required="" class="required" id="last_name" name="last_name" value="" aria-labelledby="tfa_1-L" placeholder="">
          </div>
        </div>
      </div>
    </div>

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

        <div class="oneField   labelsAbove ">
          <label for="email" class="reqMark">Email address</label>
          <div class="inputWrapper"><input type="email" maxlength="80" aria-required="true" required="" id="email" name="email" value="" placeholder="" class="required validate-email" aria-labelledby="tfa_1-L">
          </div>
 ...

CSS

* {

  box-sizing: border-box;

}



#wFormContainer {

  border: 1px solid #cccccc;
  border-radius: 10px;
  padding-left: 25px;
  background-color: #f5f5f5;
  padding-bottom: 16px;
  padding-top: 0;
  margin-bottom: 32px;
  padding-right: 25px;

}



/* 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 {

  font-family: Arial, sans-serif;

  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:450px) {

  .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: 30px !important;

  margin-bottom: 20px;

  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: 4px;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #f0f0f0;
 ...