JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
<script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
<form action="#">
    <div class="row">
        <div class="small-3 columns">
            <label for="lbNumero">NĂşmero:</label>
        </div>
        <div class="small-9 columns">
            <input type="text" id="txtNumero" />
        </div>
    </div>
    <div class="row">
        <div class="small-3 columns">
            <label for="lbNome">Nome:</label>
        </div>
        <div class="small-9 columns">
            <input type="text" id="txtNome" />
        </div>
    </div>
    <div class="row">
        <div class="small-3 columns">
            <label for="lbSexo">Sexo:</label>
        </div>
        <div class="small-9 columns">
            <input type="radio" name="rbSexos" value="masculino" />Masculino
            <input type="radio" name="rbSexos" value="feminino" />Feminino
        </div>
    </div>
    <div class="row">
        <div class="small-3 columns">    
            <label for="lbDataNasc">Data Nascimento:</label>
        </div>
        <div class="small-9 columns">
            <input type="date" id="txtDataNasc" />
        </div>
    </div>
    <div class="row">
        <div class="small-3 columns">   
        </div>
        <div class="small-9 columns">   
            <input type="button" id="btCriarCliente" class="button small" value="Criar" />
            <input type="reset" id="btCancelar" class="button small" value="Cancelar"/>
        </div>
    </div>
</form>

<table>
    <thead>
        <tr>
            <th>Numero</th>
            <th>Nome</th>
            <th>Sexo</th>
            <th>Data Nasc.</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>

<script id="tmplLinha" type="text/x-jsrender">
    <td data-column="Numero"></td>
    <td data-column="Nome"></td>
    <td data-column="Sexo"></td>
    <td data-column="DataNasc"></td>
</script>

CSS

.row label {
    text-align: right;
    padding-top: 8px;
}

.row .columns {
    padding: 0px 1%;
}

.row input[type="radio"] {
    margin: 12px 0px !important;
}

table {
    margin: 0px 1% 8px 1%;
    width: 98%;    
}

JavaScript

var clientes = [];

var txtNumero = document.getElementById("txtNumero");
var txtNome= document.getElementById("txtNome");
var rbSexos = document.getElementsByName('rbSexos');
var txtDataNasc = document.getElementById("txtDataNasc");

var tmplLinha = document.getElementById("tmplLinha");
var tbody = document.getElementsByTagName("tbody")[0];
var btCriarCliente = document.getElementById("btCriarCliente");

isNullOrWhiteSpace = function (str) {
    return !str || str.trim().length == 0;
}

btCriarCliente.onclick = function () {
    var cliente = {};    
    var sexo = ""
    var novaLinha = document.createElement('tr');    
    for (var i = 0; i < rbSexos.length; i++) {
        if (rbSexos[i].checked) {
            sexo = rbSexos[i].value;
        }
    }
    
    cliente = {
        Numero: parseInt(txtNumero.value),
        Nome: txtNome.value,
        Sexo: sexo,
        DataNasc: new Date(txtDataNasc.value),
    }
    
    if (isNaN(cliente.Numero) || isNullOrWhiteSpace(cliente.Nome) || isNullOrWhiteSpace(cliente.Sexo) || isNaN(cliente.DataNasc.getTime())) {
        return;
    }
    
    for (var indice in clientes) {
        if (clientes[indice].Numero == cliente.Numero) {
            return;
        }
    }
    
    clientes.push(cliente);
    
    novaLinha.innerHTML = tmplLinha.innerHTML;
    for (var indice in novaLinha.childNodes) {
        var celula = novaLinha.childNodes[indice];
        if (celula.nodeType == 1) {            
            switch(celula.dataset.column) {
                case "Numero": celula.innerHTML = cliente.Numero.toString(); break;
                case "Nome": celula.innerHTML = cliente.Nome; break;
                case "Sexo": celula.innerHTML = cliente.Sexo; break;
                case "DataNasc": celula.innerHTML = cliente.DataNasc.toDateString(); break;                
            }
        }
    }
    
    tbody.appendChild(novaLinha);
    return;
}