JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<form novalidate="" accept-charset="UTF-8" action="https://forms.hubspot.com/uploads/form/v2/515194/bb00883d-e552-4a4c-ba6b-d56870aefdb6" enctype="multipart/form-data" id="hsForm_bb00883d-e552-4a4c-ba6b-d56870aefdb6" method="POST" class="hs-form stacked"
data-form-id="bb00883d-e552-4a4c-ba6b-d56870aefdb6" data-portal-id="515194" data-reactid=".hbspt-forms-0">
  <fieldset class="form-columns-2" data-reactid=".hbspt-forms-0.0:$0">
    <div class="hs_firstname field hs-form-field" data-reactid=".hbspt-forms-0.0:$0.1:$firstname">
      <label class="" placeholder="Enter your First Name" for="firstname-bb00883d-e552-4a4c-ba6b-d56870aefdb6" data-reactid=".hbspt-forms-0.0:$0.1:$firstname.0"><span data-reactid=".hbspt-forms-0.0:$0.1:$firstname.0.0">First Name</span><span class="hs-form-required" data-reactid=".hbspt-forms-0.0:$0.1:$firstname.0.1">*</span></label>
      <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$0.1:$firstname.1"></legend>
      <div class="input" data-reactid=".hbspt-forms-0.0:$0.1:$firstname.$firstname">
        <input id="firstname-bb00883d-e552-4a4c-ba6b-d56870aefdb6" class="hs-input" type="text" name="firstname" required="" value="" placeholder="" data-reactid=".hbspt-forms-0.0:$0.1:$firstname.$firstname.0" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
      </div>
    </div>
    <div class="hs_lastname...

CSS

.hbspt-form-header {
  background-color: #f3f3f3;
  padding: 1.5vw 0 1vw 0;
}
.hbspt-form-header img {
  width: 70%;
}
.hbspt-form-footer{
  color: #999;
  padding: 1.35135vw 0.67568vw;
  background-color: #fff;
}
.hbspt-form-footer p {
  line-height: .75;
}
.hbspt-form-footer a {
  color: #999;
}
.hbspt-form-footer a:hover {
  color: #f3f3f3;
}
.hs-form fieldset {
  border: none;
  margin-bottom: 1.02703vw;
  padding: 0;
}

.hs-form fieldset .hs-form-field select {
  border: 0;
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-bottom: 0.13514vw solid rgba(0, 0, 0, 0.12);
  width: 100% !important;
  text-overflow: ellipsis;
  border-radius: 0;
  padding: 0.5vw 0;
  padding-right: 2.125vw;
  box-shadow: none;
}
.hs-form fieldset .hs-form-field select:focus {
  outline: none;
}
@media screen and (max-width:1023px) {
  .hs-form fieldset .hs-form-field select {
    border-bottom: 0.19531vw solid rgba(0, 0, 0, 0.12);
    padding: 1.25vw 0;
    padding-right: 4.125vw;
  }
  .hs_interested_in_b2b .input:after {
    top: 2.125vw;
    border-left: 1.31568vw solid transparent;
    border-right: 1.31568vw solid transparent;
    border-top: 1.31568vw solid rgba(0, 0, 0, 0.12);
  }
}
@media screen and (max-width:767px) {
  .hs-form fieldset .hs-form-field select {
    border-bottom: 0.625vw solid rgba(0, 0, 0, 0.12);
    padding: 2.25vw 0;
    padding-right: 12.125vw;
  }
  .hs_interested_in_b2b .input:after {
    top: 5.125vw;
    border-left: 3.615vw solid transparent;
    border-right: 3.615vw solid transparent;
    border-top: 3.615vw solid rgba(0, 0, 0, 0.12)
  }
}
.hs-form-field {
  position: relative;
  margin-bottom: 1.08108vw;
}
.hs-form fieldset .hs-error-msgs {
  position: absolute;
  left: 0;
  margin: 0;
  bottom: -1.34054vw;
  font-size: 0.87568vw;
}
@media screen and (max-width:1023px) {
  .hs-form fieldset .hs-error-msgs {
    bottom: -2.34054vw;
    font-size: 1.67568vw;
  }
}
@media screen and (max-width:767px)...