JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="row">
  <div class="col-md-12 col-md-offset-6">
    <form id="UpdateForm" method="get" runat="server">

      <fieldset>
        <h2 class="fs-title">Update your stats</h2>
        <div class="col">
          <label for="SignUpName" class="inputText">First Name: </label>
          <input type="text" id="SignUpName" runat="server" name="fName" placeholder="First Name" />
        </div>
        <div class="col">
          <label id="SignUpLastName" class="inputText">Last Name: </label>
          <input type="text" name="lName" runat="server" id="SignUpLastName" placeholder="Last Name" />
        </div>
        <div class="col">
          <label for="email" class="inputText">Email: </label>
          <input type="text" id="email" runat="server" name="email" placeholder="Email" />
        </div>
        <div class="col">
          <label for="birthDate" class="inputText">BrithDate: </label>
          <input placeholder="Birth Date" runat="server" name="birthDate" id="birthDate" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" maxlength="256" />
        </div>
        <div class="col">
          <label for="city" class="inputText">City: </label>

          <select id="city" runat="server" name="city">
            <option value="no">City</option>
          </select>

        </div>
        <div class="col">
          <label for="address" class="inputText">Address: </label>
          <input type="text" id="address" runat="server" name="address" placeholder="Address" />
        </div>
        <div class="col">
          <label for="zipCode" class="inputText">Zip Code: </label>
          <input type="text" id="zipCode" runat="server" name="zipCode" placeholder="Zip Code" />
        </div>
      </fieldset>
    </form>
  </div>
</div>

CSS

#UpdateForm {
  text-align: center;
  position: relative;
  margin-top: 2vw;
}

.col {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.inputText {
  font-size: 30px;
  margin-right: 2vw;
  font-weight: 600;
  text-align: right;
  width: 40%;
}

#UpdateForm fieldset {
  background: white;
  border: 0 none;
  border-radius: 0px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 40px 30px;
  box-sizing: border-box;
  width: 60%;
  left: 50%;
  transform: translate(-50%, 0%);
  /*stacking fieldsets above each other*/
  position: relative;
}

/*inputs*/

#UpdateForm input,
#UpdateForm textarea,
#UpdateForm select {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 0px;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 25px;
  flex-grow: 1;
}

#UpdateForm input:focus,
#UpdateForm textarea:focus,
#UpdateForm select {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: 1px solid #c7aa8b;
  outline-width: 0;
  transition: All 0.5s ease-in;
  -webkit-transition: All 0.5s ease-in;
  -moz-transition: All 0.5s ease-in;
  -o-transition: All 0.5s ease-in;
}