JSFiddle - React, Tailwind, and code Playground

by wilnet

HTML

<div id="BoxForm">
<form action="" method="POST" name="formulario" id="formulario">
 <ul>                      
	<li>
		<label for="nome">Nome:</label>
		<input name="nome" id="nome" type="text" class="campos01" required="required" value=""/>
	</li>
    
	<li>
		<label for="email">Email:</label>
		<input name="email" id="email" type="text" class="campos01" value=""/>
	</li>
    
	<li>
		<label for="cpfCnpj">Cpf/Cnpj:</label>
		<input name="cpfCnpj" id="cpfCnpj" type="text" class="campos02" required="required" value=""/>
	</li>  
      
	<li>
		<label for="rg">Identidade:</label>
		<input name="rg" id="rg" type="text" class="campos02" value=""/>
	</li>
    
	<li>
		<label for="ie">Insc Estadual:</label>
		<input name="ie" id="ie" type="text" class="campos02" value=""/>
	</li>
             
	<li>
		<input type="submit" id="enviar" value="Enviar" onClick="this.value='Aguarde...'" />
	</li>
 </ul>

</form>
</div>

CSS

#BoxForm {     
margin:20px;     
padding:10px 0 20px 10px;     
width:520px;     
height:300px;     
background:#fff;    
border:1px solid #dcdcdc;     
border-radius:10px; 
}
   
#formulario ul li {    
margin:0px 0;     
list-style:none;     
position:relative;     
clear:both; 
}
   
#formulario label {     
margin:0px 0;     
line-height:45px;     
width:130px;     
text-align:center;     
float:left;     
color:#666;
font-family: Verdana, Arial, Tahoma;
font-size:16px; 
}   

/* Nome, email */
.campos01 {     
padding:5px;     
border:1px solid #CCCCCC;     
background:#fcfcfc;     
border-radius:5px;     
color:#0082C0;
font-family: Verdana, Arial, Tahoma;
font-size:16px;
width:300px; 
}
.campos01:focus { 
background-color:#FFD;
}

/* cpf/cnpj, rg, ie */
.campos02 {     
float:left;     
padding:5px;     
border:1px solid #CCCCCC;     
background:#fcfcfc;     
border-radius:5px;     
color:#0082C0;
font-family: Verdana, Arial, Tahoma;
font-size:16px; 
width:200px;
}
.campos02:focus { 
background-color:#FFD;
}

#formulario input#enviar {     
width:100px;     
height:40px;     
margin:5px 0 0 200px;     
cursor:pointer;     
font-size:16px;     
color:#f6f6f6;     
background:#06C;     
border:1px solid #ccc;     
border-radius:5px; 
}   

#formulario input#enviar:hover {     
color:#000;     
background:#D0DDFD;     
border-color:#999; 
}