bleszerd

Estou migrando para o frontend recentemente e tenho tido dificuldades para lidar com a formatação de estilos com o CSS, alguém poderia me ajudar? Minha intenção é que o conteúdo destacado em vermelho ocupe o local da marcação verde e o resto fique centralizado na tela. Estou usando o ReactJS para a composição, porém o CSS segue as mesmas regras do tradicional com HTML puro. Como podem ver até pela imagem, design não é meu ponto forte. Código do JSX (Componente do React): <div className="login-container"> <section className="form"> <form> <h1>Bem vindo!</h1> <input type="text" placeholder="Login" /> <input type="password" placeholder="Senha" /> <p>Possuo um Token</p> <input type="text" placeholder="Token" className="token-input" /> </form> </section> </div> Código do CSS: .login-container{ display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1120px; height: 100vh; margin: 0 auto; } .login-container section.form{ width: 100%; max-width: 350px; } .login-container section.form form{ display: flex; justify-content: center; width: 100%; max-width: 1250px; height: 100%; max-height: 700px; } .login-container section.form form h1{ color: #fff; font-weight: bolder; text-shadow: #1B182E 2px 2px 8px; font-size: 42px; margin-bottom: 32px; position: absolute; margin-top: -65px; background: transparent; } .login-container section.form form input{ display: flex; justify-content: space-between; margin: 5px; width: 180px; height: 40px; max-width: 100%; font-weight: bold; padding: 8px; border-radius: 5px; color: white; background: #0A0816; border: solid #0D0929 2px; } .login-container section.form form p{ } .login-container section.form form input + p + input{ background: black; border: solid yellow 2px; } Pra quem não estiver afim de interpretar todo o código para tentar ajudar apenas diga o que você imagina que resolverá o problema. Obrigado desde já :)