JSFiddle - React, Tailwind, and code Playground

HTML

<form id="staticForm">
<div>
  <label>Are you a student?</label>
  <select>
  <option value="1">Yes</option>
  <option value="2">No</option>
  </select>
</div>
<div>
  <label>Would you like to be an astronaut?</label>
  <select>
  <option value="4">Yes</option>
  <option value="5">No</option>  
  <option value="6">I am not sure</option>
  </select>
</div>
<div>
  <label>What is your favourite planet?</label>
  <div>
   <input type="checkbox" value="7" /> Earth
  </div>
  <div>
   <input type="checkbox" value="8" /> Mars
  </div>
  <div>
   <input type="checkbox" value="9" /> Jupiter
  </div>
</div>
<div>
<input type="submit" value="Save" />
</div>
</form>

CSS

label { display: block; font-weight:bold; margin-bottom:8px }
input, select { margin-bottom:8px }

JavaScript

document.querySelector("#staticForm").addEventListener("submit", function(e){
   e.preventDefault();
   alert('Submited');
});

//Sample of JSON
var jsonResponse = [
  {
    "id": 1,
    "title": "Are you a student?",
    "answersAvailable": [
      {
        "id": 1,
        "title": "Yes"
      },
      {
        "id": 2,
        "title": "No"
      }
    ],
    "answer": [
      1
    ]
  },
  {
    "id": 2,
    "title": "Would you like to be an astronaut?",
    "answersAvailable": [
      {
        "id": 4,
        "title": "Yes"
      },
      {
        "id": 5,
        "title": "No"
      },
      {
        "id": 6,
        "title": "I am not sure"
      }
    ],
    "answer": [
      4
    ]
  },
  {
    "id": 3,
    "title": "What is your favourite planet?",
    "answersAvailable": [
      {
        "id": 7,
        "title": "Earth"
      },
      {
        "id": 8,
        "title": "Mars"
      },
      {
        "id": 9,
        "title": "Jupiter"
      }
    ],
    "answer": [
      7,
      8
    ]
  }
]