JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
		<div class="conteudo">
			<div class="formulario col6 grid esq">			
				<form method="POST" action="cadastro/inserir.php">
					<div class="lista">				
						<div>
							<input id="nome" name="nome[]" placeholder="Nome completo" type="text" />
						</div>
					</div>

					<a href="javascript:void(0)" class="adicionarCampo">
						<div class="botao-mais">
							Adcionar mais nomes
						</div>
					</a>
					<input id="enviar" type="submit" value="Enviar nomes" />
				</form>
			</div>
		</div>
	</div>

CSS

body {
    background: #000;
}

.conteudo {
    width:480px;
    margin:auto;
    padding-bottom:80px;
}

.topo {
    margin-top:130px;
}

.formulario {
    margin-top:75px;
}

.formulario form input[type=text] {
    border:0;
    background:#111111;
    padding:3.5%;
    width:93%;
    font-size:25px;
    color:#fff;
    font-weight: bold;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
}

.formulario form input[type=text].input-adicional {
	border:0;
    background:#111111;
    padding:3.5%;
    width:74.95%;
    font-size:25px;
    color:#fff;
    font-weight: bold;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -o-border-radius: 2px;
}

.formulario .nomes {
    width:100%;
    margin-top:18px;
}

.formulario a.delete {
    width:60px!important;
    height:63px!important;
    margin-top:2px;
    background:url('../img/delete.png') no-repeat center center #111111;
    color:#000000;
    float:right;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -o-border-radius: 2px;
}

.formulario a.delete:hover {
    background:url('../img/delete.png') no-repeat center center #1c1c1c;
}

.formulario .botao-mais {
    border:0;
    background:#111111;
    width: 220px!important;
    height: 38px!important;
    font-size:15px;
    text-align: center;
    margin-top: 18px;
    padding-top: 22px;
    float:left;
    color:#fff;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -o-border-radius: 2px;
}

.formulario .botao-mais:hover {
    background:#1c1c1c;
}

.formulario form input[type=submit] {
    border:0;
    background:#111111;
    height: 60px!important;
    margin-top: 18px;
    width:220px;
    font-size:15px;
    text-align: center;
    float:right;
    color:#fff;
    cursor: pointer;
        border-radius: 2px;
       ...

JavaScript

$(document).ready(function(){
	//when the Add Filed button is clicked
	$(".adicionarCampo").click(function () {
		//Append a new row of code to the "#items" div
		$(".lista").append('<div class="nomes"><input class="input-adicional" id="nome" name="nome[]" placeholder="Nome completo" type="text" /><a href="javascript:void(0)" class="delete"></a></div>');
		$(".nomes").slideDown("slow");
		$("body").animate({scrollTop: $("body").prop("scrollHeight")}, 500);
	});

	$("body").on("click", ".delete", function () {
		$(this).parent("div").slideUp("fast", function() {
			$(this).remove()	
		})
	});
});