JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Login</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style/style_index.css">
	<link href="https://fonts.googleapis.com/css?family=Inter|Roboto+Condensed&display=swap" rel="stylesheet">
</head>
<body>

	<header></header>

	<main>
		<section class="login">
			<h2>Faça o login ou cadastra-se</h2>
			<div>
				<input type="text" id="usuario" autocomplete="name" placeholder="Usuário ou e-mail">
				<input type="password" autocomplete="current-password" id="senha" placeholder="Senha">
				<button class="botao" id="logar">Login</button>
				<button class="botao" target="_self" id="cadastrar">Cadastrar</button>
				<button class="botao" id="mudarCor">Mudar cores</button>
			</div>
		</section>
	</main>
	<footer></footer>
	<script type="text/javascript" src="../Model/model.js"></script>
	<script type="text/javascript" src="../Controller/controller.js" aynsc></script>
</body>
</html>

CSS

.changeColor {
	border-style: outset;
	border-top-style: none;
	border-left-style: none;
	box-shadow: 3px -3px 8px 1px  grey ;
}

JavaScript

var button_MudaCor = document.querySelector("#mudarCor");

button_MudaCor.addEventListener('click', function (event) {

  if (button_MudaCor.classList.contains('changeColor')) {
    button_MudaCor.classList.remove('changeColor');
  } else {
    button_MudaCor.classList.add('changeColor');
  }

}, false);


function mudaCor(state) {
	if (state == true) {
		button_MudaCor.className = "changeColor";
	} else {
		button_MudaCor.className = "";
	}
};