JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrapper">
      <form action="">
        <div class="candy">
          <h1 id="title">Survey Form</h1>
          <p id="description">
            Please fill out this form with the required information
          </p>
        </div>
        <div class="candy">
          <label for="first-name"
            >First Name <input id="first-name" type="text"
          /></label>
          <label for="last-name"
            >Last Name <input id="last-name" type="text"
          /></label>
          <label for="email">Email <input id="email" type="email" /></label>
          <label for="number"
            >Number <input id="number" type="number" min="9"
          /></label>
          <label for="age"
            >Age <input id="age" type="number" min="13" max="100"
          /></label>
        </div>
        <div class="candies">
          <label for="gender">What is your Gender</label>
          <label for="male" class="radio"
            ><input
              value="male"
              id="male"
              type="radio"
              name="gender"
              checked
            />Male</label
          >
          <label for="female" class="radio"
            ><input
              value="female"
              id="female"
              type="radio"
              name="gender"
            />Female</label
          >
        </div>
        <div class="candy">
          <label for="education-level">What is your Education Level?</label>
          <select id="education-level">
            <option>Highschool</option>
            <option>Undergraduate</option>
            <option>Graduate/Postgraduate</option>
            <option>Other</option>
          </select>
        </div>
      </form>
    </div>
  </body>
</html>

CSS

.wrapper {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100vh;
  min-width: 300px;
  max-width: 400px;
  width: 60vh;
}

h1,
p {
  margin: 1em auto;
  text-align: center;
  font-size: 20px;
}

.candy {
  display: flex;
  flex-direction: column;
}

.candy label,
input,
legend {
  margin-bottom: 5px;
  display: block;
  margin: 0.5rem;
}

.candy label {
  font-weight: bold;
}

.candy input {
  border-radius: 10px;
  border: solid 1px black;
  width: 100%;
}

.radio {
  display: flex;
  align-items: center;
}