JSFiddle - React, Tailwind, and code Playground

by Good Muyis

HTML

<form action="<?= route('addOlevel') ?>" method="post">
  {{ csrf_field() }}
  <div class="row o-level mt-3 p-2">
    <div class="col-12 mb-2">
      <h6><b>Add your O'Level subjects</b></h6>
    </div>
    <div class="col-6 col-sm-4 p-1">
      <input type="text" name="subject" id="subject" class="form-control">
    </div>
    <div class="col-3 col-sm-3 p-1">
      <select name="grade" id="grade" class="form-control">
        <option>A1</option>
        <option>B2</option>
        <option>B3</option>
        <option>C4</option>
        <option>C5</option>
        <option>C6</option>
        <option>D7</option>
        <option>E8</option>
        <option>F9</option>
      </select>
    </div>
    <div class="col-3 col-sm-2 p-1">
      <select name="exam" id="exam" class="form-control">
        <option>WAEC - MAY/JUN</option>
        <option>WAEC - NOV/DEC</option>
        <option>NECO - JUN/JUL</option>
        <option>NECO - NOV/DEC</option>
      </select>
    </div>
    <div class="col-6 col-sm-2 p-1">
      <input type="text" name="year" id="year" class="form-control">
    </div>
    <div class="col-6 col-sm-1 p-1">
      <button type="submit" id="addOlvl" class="btn btn-success btn-sm  p-1 pr-3 pl-3">Add</button>
    </div>
  </div>
</form>