JSFiddle - React, Tailwind, and code Playground

by Sushant Ghorpade

HTML

<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->

<script>
  //function for passing data to select option using ajax request
  var xmlhttp = new XMLHttpRequest();
  var url = "https://api.myjson.com/bins/9ohkv";
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var myArr = JSON.parse(this.responseText);
      myFunction(myArr);
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();

  function myFunction(arr) {
    var out = "";
    var i;
    for (i = 0; i < arr.length; i++) {
      out += '<option value="' + arr[i].code + '">' +
        arr[i].name + '</option>';
    }
    document.getElementById("selectcountry").innerHTML = out;
  }

  // function for reaset input box on reset button click
  function resetform() {
    document.getElementById("signupform").reset();
  }

  // function for hide error massage when keypress on input box
  function error() {
    document.getElementById("errormsg").style.display = "none";
    document.getElementById("errormsg1").style.display = "none";
    document.getElementById("errormsg2").style.display = "none";
    document.getElementById("errormsg3").style.display = "none";
    document.getElementById("errormsg4").style.display = "none";
    document.getElementById("errormsg5").style.display = "none";
    document.getElementById("errormsg6").style.display = "none";
    document.getElementById("errormsg7").style.display = "none";
  }

  // function for form validation 
  function validateForm() {
    var dobpattern = /^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/;
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    var name = document.myForm.name.value;
    var dob = document.myForm.dob.value;
    var username = document.myForm.username.value;
    var email = document.myForm.email.value;
    var gender = document.myForm.gender.value;
    var password = document.myForm.pswd.value;
  ...

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');

.form-wrapper {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  box-shadow: 1px 1px 3px #adadad;
  -webkit-box-shadow: 1px 1px 3px #adadad;
  -moz-box-shadow: 1px 1px 3px #adadad;
  -ms-box-shadow: 1px 1px 3px #adadad;
  -o-box-shadow: 1px 1px 3px #adadad;
  background: #24323d;
  padding: 0 0 15px;
  width: 500px;
  margin: 0 auto;
  font-size: 14px;
  form {
    &.forms {
      .form-title {
          font-size: 20px;
          text-transform: uppercase;
          margin:0;
          text-align:center;
          color: #fff;
          font-weight: normal;
          background:#1ab188;
          padding:15px;
      }
      .signup-form {
        width:400px;
        margin:25px auto 0 auto;
        .form-group {
          position:relative;
          margin:0 auto 20px auto;
        
          .form-control {
            background: none;
            font-size: 16px;
            padding: 5px 0;
            display: block;
            width: 400px;
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #a5abb7;
            /* height: 22px; */
            color: #a5abb7;
            &:focus {
              outline: none;
            }
            &:focus ~ .bar:before {
              width: 100%;
            }
          }
          span {
            &.error {
              background: #c51244;
              bottom: -41px;
              position: absolute;
              left: 0;
              z-index: 1;
              min-width: 100%;
              box-shadow: 0px 1px 5px 0px rgb(132, 9, 43);
              color: white;
              font-size:12px;
              display:none;
              padding:8px;
              &:before {
                content: '';
                position: absolute;
                width:0;
                height:0;
                border-left:8px solid transparent;
                border-right:8px solid...