JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<script src="https://www-forms.rmit.edu.au/themes/get/default"></script>
<link rel="stylesheet" href="https://www-forms.rmit.edu.au/form-builder/4.1.0/css/wforms-layout.css">
<link rel="stylesheet" href="https://www-forms.rmit.edu.au/form-builder/4.1.0/css/wforms-jsonly.css">
<script src="https://www-forms.rmit.edu.au/wForms/3.7/js/wforms.js"></script>
<script src="https://www-forms.rmit.edu.au/wForms/3.7/js/localization-en_GB.js"></script>
<!-- FORM: HEAD SECTION -->



<!-- FORM: BODY SECTION -->
<div class="wFormContainer" style="width: 100%;">

  <div class="">
    <div class="wForm" id="tfa_0-WRPR" dir="ltr">
      <div class="codesection" id="code-tfa_0"></div>
      <h3 class="wFormTitle" id="tfa_0-T">Expression of interest form:&nbsp;N0010 Lighting Engineering and Design</h3>
      <form method="post" action="https://www-forms.rmit.edu.au/responses/processor" class="hintsBelow labelsAbove" id="tfa_0">
        <fieldset id="tfa_1" class="section">
          <legend id="tfa_1-L"><span style="">Contact details</span></legend>
          <div id="tfa_2-D" class="oneField    ">
            <label id="tfa_2-L" for="tfa_2" class="label preField reqMark"><span style="">First name:</span></label><br>
            <div class="inputWrapper"><input type="text" id="tfa_2" name="tfa_2" value="" style="width: 400px" placeholder="" class="required"></div>
          </div>
          <div id="tfa_4-D" class="oneField    ">
            <label id="tfa_4-L" for="tfa_4" class="label preField reqMark">Last name:</label><br>
            <div class="inputWrapper"><input type="text" id="tfa_4" name="tfa_4" value="" style="width: 400px" placeholder="" class="required"></div>
          </div>
          <div id="tfa_11-D" class="oneField    ">
            <label id="tfa_11-L" for="tfa_11" class="label preField reqMark">Date of birth (dd/mm/yy):</label><br>
            <div class="inputWrapper"><input type="text" id="tfa_11" name="tfa_11" value="" style="width: 400px" placeholder=""...

CSS

* {
  box-sizing: border-box;
}

.wForm fieldset{
  border: none;
  }
  
  .wForm .inputWrapper{
    width: 100% !important;

      
  }
  
   .wForm input[type=text]{    
     width: 100% !important;

  font-family: Arial, sans-serif;
  font-size: 16px;
  padding: 10px;

   border-radius: 4px;
   }
   
   
select {
  width: 100% !important;
  height: 51px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  padding: 10px;

  /*margin-top:10px;*/

  /*margin-bottom:30px;*/
  border-color: #ccc;
  color: #333;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  -webkit-border-radius: 4px;
  appearance: none;
  background-color: #fff;
  background-position:right 50%;
  background-size: 1.5em;
    background-repeat:no-repeat;
    background-position: calc(100% - 0.8em) center;
   background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}



.select:after {
  border-style: solid;
  border-width: 0.01em 0.01em 0 0;
  content: '';
  display: inline-block;
  height: 0.80em;
  right: 20px;
  position: absolute;
  top: 45px;
  transform: rotate(135deg);
  vertical-align: top;
  width: 0.80em;
}
input[type=checkbox]{
 -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  transform: scale(1.5);
  padding: 10px;
  margin-bottom:20px;
-webkit-appearance: none;
border:1px solid #cccccc;
border-radius:2px;
  }
input[type=checkbox]:checked {

  border:1px solid  #333;
 ...