JSFiddle - React, Tailwind, and code Playground
by Hugo Santos
HTML
<body>
<button id="primeiro-acesso-btn" onclick="abreCadastro()">Primeiro Acesso ?</button>
<button id="cadastrar-novo-btn">Cadastre-se</button>
<button id="info-btn">Informações</button>
<div class="s-modal-wrap" id="modal-info-cadastro" style="background-image: url(images/parallax/home/1.jpg); background-repeat: no-repeat;background-size: cover; display: none;">
<div class="s-modal-content">
<h3>No MEU CONDOMÍNIO Você terá acesso a:</h3>
<ul>
<li>Portal do Condomínio 24 horas</li>
<li>Emissão de Boletos Bancários atualizados para Impressão e pagamento da cota condominial.</li>
<li>Visualização de cotas condominiais Pendentes</li>
<li>Avisos e Comunicados</li>
<li>Acesso a Atas de Assembléia | Convenção | Regimento Interno</li>
<li>Agenda e Reserva de Espaços</li>
</ul>
<button><i class="fa fa-arrow-circle-left fa-lg" aria-hidden="true"></i> Voltar</button>
</div>
</div>
<div class="s-modal-wrap" id="modal-cadastro" style="background-image: url(images/parallax/home/1.jpg); background-repeat: no-repeat;background-size: cover; display: none;">
<div class="s-modal-content">
<h3>No MEU CONDOMÍNIO Você terá acesso a:</h3>
<form>
<input type="text" name="nome" required placeholder="Nome" class="form-control input-lg not-dark required email">
<input type="text" name="nome-condominio" required placeholder="Condomínio" class="form-control input-lg not-dark required email" style="margin-top: 10px; margin-bottom: 10px;">
<input type="password" name="senha" required...
JavaScript
$("#cadastrar-novo-btn").click(function(){
$("#modal-cadastro").show();
});
$("#info-btn").click(function(){
$("#modal-info-cadastro").show();
});
$("#modal-info-cadastro .s-modal-content button").click(function(){
$("#modal-info-cadastro").hide();
});
$("#modal-cadastro .s-modal-content button").click(function(){
$("#modal-cadastro").hide();
});