JSFiddle - React, Tailwind, and code Playground

HTML

<link rel = "stylesheet" href = "style.css">
<form id="Login" class="Loginform" method="post">
  <label class="inlog">
    <input class="invoertype" type="text" required />
    <div class="invoertext">Email</div>
  </label>
  
  <label class="inlog">
    <input class="invoertype" type="password" required />
    <div class="invoertext">Password</div>
  </label>
</form>


<form id="Signin" class="Loginform" method="post">
  <label class="inlog">
    <input class="invoertype" type="text" required />
    <div class="invoertext">Email</div>
  </label>
  
  <label class="inlog">
    <input class="invoertype" type="password" required />
    <div class="invoertext">Password</div>
  </label>
</form>


<form id="Reset" class="Loginform" method="post">
  <label class="inlog">
    <input class="invoertype" type="text" required />
    <div class="invoertext">Email</div>
  </label>

</form>

    <form class="Navigatieinlog">
  <input class="alleinput" id='signin' name='radios' type='radio' value='signin'>
  <label class="lblnavigatie" for='signin'>Sign in</label>

  <input class="alleinput"id='signup' name='radios' type='radio' value='signup'>
  <label class="lblnavigatie" for='signup'>Sign up</label>

  <input id='reset' class="alleinput" name='radios' type='radio' value='reset'>
  <label class="lblnavigatie" for='reset'>Reset</label>
</form>

CSS

body {
  background: black;
}

.Loginform {
    text-align: center;
  position: relative;
  top: 35vh;
}

.inlog {
  display: block;
  letter-spacing: 4px;
  padding-top: 30px;
  text-align: center;
}

.inlog .invoertext {
  color: white;
  cursor: text;
  font-size: 20px;
  line-height: 20px;
  text-transform: uppercase;
  -moz-transform: translateY(-34px);
  -ms-transform: translateY(-34px);
  -webkit-transform: translateY(-34px);
  transform: translateY(-34px);
  transition: all 0.3s;
}

.inlog .invoertype {
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid white;
  color: white;
  font-size: 36px;
  letter-spacing: -1px;
  outline: 0;
  padding: 5px 20px;
  text-align: center;
  transition: all 0.3s;
  width: 200px;
}

.inlog .invoertype:focus {
  max-width: 100%;
  width: 400px;
}

.inlog .invoertype:focus + .invoertext {
  color: whitesmoke;
  font-size: 13px;
  -moz-transform: translateY(-74px);
  -ms-transform: translateY(-74px);
  -webkit-transform: translateY(-74px);
  transform: translateY(-74px);
}

.inlog .invoertype:valid + .invoertext {
  font-size: 13px;
  -moz-transform: translateY(-74px);
  -ms-transform: translateY(-74px);
  -webkit-transform: translateY(-74px);
  transform: translateY(-74px);
}







.Navigatieinlog {
  width: 450px;
  height: 30px;
  margin: -185px -225px;
  position: absolute;
  left: 50%;
  top: 50%;
  color: white;
}

.alleinput[type=radio] { display: none; }

.lblnavigatie {
  cursor: pointer;
  display: inline-block;
  letter-spacing: 4px;
  padding-top: 30px;
  text-align: center;
}


.lblnavigatie[for="signin"] { margin-right: 20px; }
.lblnavigatie[for="reset"] { float: right; }
.lblnavigatie[type=radio]:checked + .lblnavigatie { opacity: 1; }

JavaScript

var radios = document.getElementsByName("radios");
        var Login = document.getElementById("Login");
        var Signin = document.getElementById("Signin");
        var Reset = document.getElementById("Reset");
        Login.style.display = 'block';   // show
        Signin.style.display = 'none'; // hide
        Reset.style.display = 'none'; // hide
for(var i = 0; i < radios.length; i++) {
    radios[i].onclick = function() {
        var val = this.value;
        if (val == 'signin') {
            Login.style.display = 'block';
            Signin.style.display = 'none';
            Reset.style.display = 'none';
        }
        else if (val == 'signup') {
            Login.style.display = 'none';
            Signin.style.display = 'block';
            Reset.style.display = 'none';
        }
        else if (val == 'reset') {
            Login.style.display = 'none';
            Signin.style.display = 'none';
            Reset.style.display = 'block';
        }    
            
    }
}