JSFiddle - React, Tailwind, and code Playground

by Ben Jones

HTML

<section style="width: 752px; margin: 0; padding: 0px;">
  <h3 style="margin: 10px 0 8px 15px; font-size: 20px; color: #464D59; font-weight: normal;">New Accrual</h3>
  <div style="border-top: 1px solid #BEC3CC; margin:0 0 15px 0; height: 5px;"></div>
  <div class="ay-columns" style="margin:5px; padding: 0 15px;">
    <section style="width:100%; white-space:nowrap;">
      <div style="display: inline-block; width: 33%;">
        <div style="margin: 0 0 10px -3px;  width: 33%; font-size: 14px; color: #6A7280;">Accrual Name<span style="color: #E93716;">*</span></div>
        <ay-field style="" id="accrualName" onChange="" placeholder="" type="" value="1-50 characters" name="accrual" max="50">
        </ay-field>
      </div>
      <div style="display: inline-block; width: 33%; margin-left: 33%;">
        <div style="display:inline-block; margin: 0 0 10px -3px; font-size: 14px; color: #6A7280;">Accrue To<span style="color: #E93716;">*</span>
        </div>
        <ay-drop-down style="" id="item-1" max="50" name="" defaultValue="" onChange="">
          <option value="pto">PTO</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </ay-drop-down>
      </div>
      <div style="margin: 0 0 25px 0;">
        <label id="accrualNameErrorMessage" style="font-size: 13px; font-weight: 700; color: #E93716;">* Accrual Name must be 1 - 50 characters and no special characters</label>
      </div>
    </section>
  </div>
</section>