JSFiddle - React, Tailwind, and code Playground

HTML

<form role="form" id="formDadosPessoais" onSubmit="return false;">

<div class="container-fluid margin-top newFormatCol criaCaixa">
	<div class="main main-raised">
		<div class="col-md-12 lineH">
			<button class="btn btn-default btnBoxToogle boxDadosPessoais" onClick="hideShow('boxDadosPessoais');"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></button>
			<h4 class="alert alert-info">DADOS PESSOAIS</h4>
		</div>
		<div id="boxDadosPessoais" style="display: block;">
			<div class="col-md-8">
			<form role="form" id="formDadosPessoais" onSubmit="return false;">
				<div class="col-md-6 lineH">
					<label for="codigoDadosPessoais">Código:</label>
					<div class="form-group">
						<input type="text" id="codigoDadosPessoais" name="codigoDadosPessoais" value="" class="form-control">
					</div>
				</div>
				<div class="col-md-6 lineH">
					<label for="dataDadosPessoais">Data cadastro:</label>
					<div class="form-group">
						<input type="text" id="dataDadosPessoais" name="dataDadosPessoais" value="" class="form-control">
					</div>
				</div>
				<div class="col-md-6 lineH">
					<label for="documentoDadosPessoais">CPF/CNPJ:</label>
					<div class="form-group">
						<input autofocus type="text" id="documentoDadosPessoais" name="documentoDadosPessoais" value="" class="form-control" required>
					</div>
				</div>
				<div class="col-md-6 lineH">
					<label for="documento2DadosPessoais">RG/IE/OAB:</label>
					<div class="form-group">
						<input type="text" id="documento2DadosPessoais" name="documento2DadosPessoais" value="" class="form-control">
					</div>
				</div>
				<div class="col-md-12 lineH">
					<label for="nomeDadosPessoais">Nome:</label>
					<div class="form-group">
						<input type="text" id="nomeDadosPessoais" name="nomeDadosPessoais" value="" class="form-control" required>
					</div>
				</div>
				<div class="col-md-6 lineH">
					<label for="cepDadosPessoais">CEP:</label>
					<div class="form-group">
						<input...

CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="//eonasdan.github.io/bootstrap-datetimepicker/css/prettify-1.0.css">
    <link rel="stylesheet" href="//eonasdan.github.io/bootstrap-datetimepicker/css/base.css">
    <link rel="stylesheet" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

JavaScript

$(document).ready(function(){

$("button#btnGravarDados").on('click', function(){
			
			var codigoDadosPessoais = $("#codigoDadosPessoais").val();
			var dataDadosPessoais = $("#dataDadosPessoais").val();
			
			var documentoDadosPessoais = $("#documentoDadosPessoais").val();
			if(documentoDadosPessoais == "") {
				$(".alerta01").fadeTo(3000,500).slideUp(500,function() {
					$(".alerta01").slideUp(500);
					$(".alerta01").hide();
				});
				$('#documentoDadosPessoais').focus(); 
				return false;
			}
			
			var documento2DadosPessoais = $("#documento2DadosPessoais").val();
			
			var nomeDadosPessoais = $("#nomeDadosPessoais").val();
			if(nomeDadosPessoais == "") {
				$(".alerta02").fadeTo(3000,500).slideUp(500,function(){
					$(".alerta02").slideUp(500);$(".alerta02").hide();
				});
				$( "#nomeDadosPessoais" ).focus();
				return false;
			}
			
			var cepDadosPessoais = $("#cepDadosPessoais").val();
			if(cepDadosPessoais == "") {
				$(".alerta03").fadeTo(3000,500).slideUp(500,function(){
					$(".alerta03").slideUp(500);$(".alerta03").hide();
				});
				$( "#nomeDadosPessoais" ).focus();
				$( "#cepDadosPessoais" ).focus();
				return false;
			}
			
			var enderecoDadosPessoais = $("#enderecoDadosPessoais").val();
			if(enderecoDadosPessoais == "") {
				$(".alerta04").fadeTo(3000,500).slideUp(500,function(){
					$(".alerta04").slideUp(500);$(".alerta04").hide();
				});
				$( "#enderecoDadosPessoais" ).focus();
				return false;
			}
			
			var numeroDadosPessoais = $("#numeroDadosPessoais").val();
			if(numeroDadosPessoais == "") {
				$(".alerta05").fadeTo(3000,500).slideUp(500,function(){
					$(".alerta05").slideUp(500);$(".alerta05").hide();
				});
				$( "#numeroDadosPessoais" ).focus();
				return false;
			}
			
			var complementoDadosPessoais = $("#complementoDadosPessoais").val();
			
			var bairroDadosPessoais = $("#bairroDadosPessoais").val();
			if(bairroDadosPessoais == "")...