JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="header">
        <header>
            <div id="hdrcontainer">
                	<h1 id="hdrone">SKETCHULE</h1>

                <hr id="sephdronetwo" />
                	<h2 id="hdrtwo">ORGANIZE YOUR LIFE</h2>

            </div>
        </header>
    </div>
    <div>
        <hr />
    </div>
    <div id="main">
        <div>
            <form action="registration.php" method="post" id="regform">
                <fieldset>
                    <legend>Create your Sketchule account</legend>
                    <div>
                        <label for="fname">First Name:</label>
                        <input type="text" size="25" name="fname" placeholder="First Name" id="fname" />
                    </div>
                    <div>
                        <label for="lname">Last Name:</label>
                        <input type="text" size="25" name="lname" placeholder="Last Name" id="lname" />
                    </div>
                    <div>
                        <label for="email">Email:</label>
                        <input type="text" size="25" name="email" placeholder="Email" id="email" />
                    </div>
                    <div>
                        <label for="password">Password:</label>
                        <input type="password" size="25" name="password" placeholder="Password" id="password" />
                    </div>
                    <div>
                        <label for="gender">Gender:</label>
                        <select name="gender" id="gender">
                            <option value="-1"></option>
                            <option value="M">Male</option>
                            <option value="F">Female</option>
                        </select>
                    </div>
                    <div>
                        <label for "DOBM">Birthday:</label>
                        <select name="DOBM" id="DOBM">
                            <option value="-1">MM</option>
                 ...

CSS

body {
    background-color:#FFFFFF;
    font:bold 12px"Lucida Grande", Arial, sans-serif;
    padding:20px;
}
#header {
    position:relative;
    left:0px;
    top:0px;
    height:150px;
    width:100%;
    padding:0px;
    margin:0px;
    background-color:#993333;
    color:#FFFFFF;
}
#hdrone {
    font-size:40px;
    text-align:center;
    padding:0px;
    margin:0px;
}
#hdrtwo {
    font-size:25px;
    text-align:center;
    padding:0px;
    margin:0px;
}
#sephdronetwo {
    width:300px;
    margin-left:auto;
    margin-right:auto;
    padding:0px;
}
li {
    display:inline-block;
    margin:10px;
}
#footer {
    background:#993333;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    width:100%;
}
a {
    color:#FFFFFF;
}
hr {
    margin:0px;
}
a {
    text-decoration: none;
}
legend {
    color: #336699;
    font-size:20px;
    padding: 10px 6px;
}
label {
    display:inline-block;
    width:100px;
}
fieldset {
    border:2px solid #336699;
    height:350px;
    width:30em;
    margin:20px;
    position:relative;
}
option {
    margin:1px;
}
.focusField {
    border:solid 2px #DFDFDF;
    background:#CADCED;
    color:#000;
}
.idleField {
    background:#EEE;
    color: #6F6F6F;
    border: solid 2px #DFDFDF;
}
#regform {
    padding:10px;
    outline:none;
}
#fname {
    padding:10px;
    outline:none;
}
#lname {
    padding:10px;
    outline:none;
}
#email {
    padding:10px;
    outline:none;
}
#password {
    padding:10px;
    outline:none;
}
#gender {
    padding:10px;
    outline:none;
}
#DOBD {
    padding:10px;
    outline:none;
}
#DOBM {
    padding:10px;
    outline:none;
}
#DOBY {
    padding:10px;
    outline:none;
}
#submit {
    padding:3px;
    outline:none;
}
::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #6F6F6F;
}
:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #6F6F6F;
}
::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #6F6F6F;
}
:-ms-input-placeholder {
    /* Internet...

JavaScript

$('input[type="text"],input[type="password"],select,:submit').addClass("idleField");
          $('input[type="text"],input[type="password"],select').focus(function () {
              $(this).removeClass("idleField").addClass("focusField");
              if (this.value == this.defaultValue) {
                  this.value = '';
              }
              if (this.value != this.defaultValue) {
                  this.select();
              }
          });

          $('input[type="text"],input[type="password"],select').blur(function () {
              $(this).removeClass("focusField").addClass("idleField");
              if ($.trim(this.value == '')) {
                  this.value = (this.defaultValue ? this.defaultValue : this.value);
              }
          });

          $('#DOBM,#DOBY').change(function () {
              if ($('#DOBM').val() == '04' || $('#DOBM').val() == '06' || $('#DOBM').val() == '09' || $('#DOBM').val() == '11') {
                  $("#DOBD option[value='31']").remove();
                  if ($("#DOBD option[value='29']").length == 0) {
                      $("#DOBD").append("<option value='29'>29</option>");
                  }
                  if ($("#DOBD option[value='30']").length == 0) {
                      $("#DOBD").append("<option value='30'>30</option>");
                  }
              }
              if ($('#DOBM').val() == '01' || $('#DOBM').val() == '03' || $('#DOBM').val() == '05' || $('#DOBM').val() == '07' || $('#DOBM').val() == '08' || $('#DOBM').val() == '10' || $('#DOBM').val() == '12') {
                  if ($("#DOBD option[value='29']").length == 0) {
                      $("#DOBD").append("<option value='29'>29</option>");
                  }
                  if ($("#DOBD option[value='30']").length == 0) {
                      $("#DOBD").append("<option value='30'>30</option>");
                  }
                  if ($("#DOBD option[value='31']").length == 0) {
                     ...