JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
                <article id="form-section">
                    <div class="form-header">
                       <h1>Validação do Formulário<h1>
                    </div>
                        <form id="formH2H" action="" >
                            <div class="nmb">1</div>
                            <h3 class="title-sec">Preencha corretamento os campos.</h3>
                                <div class="form-bg">

                                    <label for="nome">Nome</label>
                                    <input id="nome" name="nome" type="text">   

                                    <label for="email">Email</label>
                                    <input name="email" type="email"> <br>

                                    <label for="fone">Telefone</label>
                                    <input id="fone" name="fone" type="text">  

                                    <label for="cpf">CPF</label>
                                    <input id="cpf" name="cpf" type="text">    <br>  <br>

                                    <label for="cep">CEP</label>
                                    <input type="text" value="" id="cep"/><input type="button" id="getEndereco" value="Pesquisar CEP"/><br/>
                                    <p id="loadingCep"></p>

                                    <label for="cidade">Cidade</label>
                                    <input type="text" readonly="readonly" id="cidade"/><br/>

                                    <label for="estado">Estado</label>
                                    <input type="text" readonly="readonly" id="estado"/>

                                    <label for="data">Data</label>
                                    <input id="data" class="data" type="text" name="date" >   

                                    <input type="submit" value="Enviar" />
                                </div>
                        </form>
                </article>    
          ...

CSS

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body { background:#89D9F2;}
#form-section{background:#fff;border-radius: 10px 10px 0 0;width:60%;}
#form-section .form-header {background: linear-gradient(#187692, #105672) repeat scroll 0 0 rgba(0, 0, 0, 0);color: #fff;padding: 9px 51px;border-radius: 10px 10px 0 0;}
#form-section .nmb {
    background: none repeat scroll 0 0 #00b0df;
    border: 5px solid #fff;
    border-radius: 30px;
    color: #fff;
    font-weight: 900;
    height: 35px;
    left: -16px;
    padding: 2px 7px;
    position: relative;
    top: 48px;
    width: 35px;
}
#form-section .form-bg {
    background: none repeat scroll 0 0 #f1f1f1;
    border-radius: 10px;
    margin: auto;
    padding: 30px;
    position: relative;
    width: 80%;
}
#form-section label{font-weight: 100;} 
#form-section input {
    border-color: #dfdfdf #fff #fff #dfdfdf;
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
    height: 31px;
    width: 100%;
    margin-bottom:20px;
}
#form-section .title-sec {
    color: #006faf;
    font-size: 1.5em;
    font-weight: 100;
    margin-left: 70px;
}
input.error{box-shadow: red 0 0 5px;}
input.sucess{box-shadow:green 0 0 5px;}

JavaScript

/*
    jQuery Masked Input Plugin
    Copyright (c) 2007 - 2014 Josh Bush (digitalbush.com)
    Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
    Version: 1.4.0
*/
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){var b,c=navigator.userAgent,d=/iphone/i.test(c),e=/chrome/i.test(c),f=/android/i.test(c);a.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},autoclear:!0,dataName:"rawMaskFn",placeholder:"_"},a.fn.extend({caret:function(a,b){var c;if(0!==this.length&&!this.is(":hidden"))return"number"==typeof a?(b="number"==typeof b?b:a,this.each(function(){this.setSelectionRange?this.setSelectionRange(a,b):this.createTextRange&&(c=this.createTextRange(),c.collapse(!0),c.moveEnd("character",b),c.moveStart("character",a),c.select())})):(this[0].setSelectionRange?(a=this[0].selectionStart,b=this[0].selectionEnd):document.selection&&document.selection.createRange&&(c=document.selection.createRange(),a=0-c.duplicate().moveStart("character",-1e5),b=a+c.text.length),{begin:a,end:b})},unmask:function(){return this.trigger("unmask")},mask:function(c,g){var h,i,j,k,l,m,n,o;if(!c&&this.length>0){h=a(this[0]);var p=h.data(a.mask.dataName);return p?p():void 0}return g=a.extend({autoclear:a.mask.autoclear,placeholder:a.mask.placeholder,completed:null},g),i=a.mask.definitions,j=[],k=n=c.length,l=null,a.each(c.split(""),function(a,b){"?"==b?(n--,k=a):i[b]?(j.push(new RegExp(i[b])),null===l&&(l=j.length-1),k>a&&(m=j.length-1)):j.push(null)}),this.trigger("unmask").each(function(){function h(){if(g.completed){for(var a=l;m>=a;a++)if(j[a]&&C[a]===p(a))return;g.completed.call(B)}}function p(a){return g.placeholder.charAt(a<g.placeholder.length?a:0)}function q(a){for(;++a<n&&!j[a];);return a}function r(a){for(;--a>=0&&!j[a];);return a}function s(a,b){var...