JSFiddle - React, Tailwind, and code Playground

by Francisco Maria Calisto

HTML

<div class="smart-wrap">
    	<div class="smart-forms smart-container wrap-1">
        
        	<div class="form-header header-primary">
            	<h4><i class="fa fa-pencil-square"></i>Formulário</h4>
            </div><!-- end .form-header section -->
            
            <form method="post" action="#" id="smart-form">
            	<div class="form-body">
                
                    <div class="spacer-b30">
                    	<div class="tagline"><span> Dados Pessoais </span></div><!-- .tagline -->
                    </div>
                    
                    <div class="frm-row">
                        <div class="section colm colm6">
                            <label for="firstname" class="field prepend-icon">
                                <input type="text" name="_prospecto_nome" id="firstname" class="gui-input" placeholder="Nome">
                                <label for="firstname" class="field-icon"><i class="fa fa-user"></i></label>  
                            </label>
                        </div><!-- end section -->
                        
                        <div class="section colm colm6">
                            <label for="lastname" class="field prepend-icon">
                                <input type="text" name="_prospecto_apelido_paterno" id="lastname" class="gui-input" placeholder="Apelidos">
                                <label for="lastname" class="field-icon"><i class="fa fa-user"></i></label>  
                            </label>
                        </div><!-- end section -->
                        <div class="section colm colm6">
                            <label for="lastname" class="field prepend-icon">
                                <input type="text" name="lastname" id="lastname" class="gui-input" placeholder="Apelido">
                                <label for="lastname" class="field-icon"><i class="fa fa-user"></i></label>  
                            </label>
                 ...

CSS

@font-face { font-family: 'FontAwesome'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/172203/fontawesome-webfontba72.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/172203/fontawesome-webfontba72.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/172203/fontawesome-webfontba72.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/172203/fontawesome-webfontba72.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; }