JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codolog/[email protected]/dist/form.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
  <main dir="rtl" lang="ar">
    <div class="form-wrapper">
      <label class="form" for="homeNumber">رقم المنزل</label>
      <input
        class="form"
        type="number"
        id="homeNumber"
        name="homeNumber"
        min="0"
        max="1000"
        required
      />
    </div>

    <div class="form-wrapper">
      <label class="form" for="homeType">نوع المنزل</label>
      <select class="form" id="homeType" name="homeType">
        <option value="owner">ملك</option>
        <option value="rent">إيجار</option>
      </select>
    </div>

    <div class="form-wrapper">
      <label class="form" for="familyNumber">عدد أفراد الأسرة</label>
      <input
        v-model="form.numberOfPeople"
        class="form"
        type="number"
        id="familyNumber"
        name="familyNumber"
        min="1"
        max="30"
        required
      />
    </div>

    <div v-for="(i, index) in form.numberOfPeople" :key="index">
      <div class="form-wrapper">
        <label class="form" for="name">الإسم الرباعي</label>
        <input
          class="form"
          v-model="form.people[i].name.value"
          type="text"
          id="name"
          name="name"
        />
      </div>

      <div class="form-wrapper">
        <label class="form" for="gender">النوع</label>
        <select
          class="form"
          id="gender"
          v-model="form.people[i].gender.value"
          name="gender"
        >
          <option value="male">ذكر</option>
          <option value="female">أنثى</option>
        </select>
      </div>

      <div class="form-wrapper">
        <label class="form" v-model="form.people[i].age.value" for="age">العمر</label>
        <input
          class="form"
          type="number"
          id="age"
          name="age"
          min="1"
         ...

CSS

main {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 700px;
  margin: 0 auto;
}

.form-wrapper {
  margin-bottom: 1rem;
}

select.form:not([multiple]) {
  background-position: left 0.7rem center;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    form: {
    	numberOfPeople: 1,
      people: []
    }
  }
})