JSFiddle - React, Tailwind, and code Playground

HTML

<div class="login-page">
  <div class="switch">
    <a data-toggle=".form1">Form1</a>
    <a data-toggle=".form2">Form2</a>
    <a data-toggle=".form3">Form3</a>
  </div>
  <div class="form">
    <form class="form1"></form>
    <form class="form2"></form>
    <form class="form3"></form>
  </div>
</div>

CSS

.switch a {
  width: 100px;
  height: 20px;
  background: grey;
  text-align: center;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
}

form {
  width: 100px;
  height: 100px;
  display: none;
}

.form1 {
  background: red;
}

.form2 {
  background: blue;
}

.form3 {
  background: green;
}

JavaScript

$("a[data-toggle]").on("click", function(e) {
  var selector = $(this).data("toggle");
  if ($(selector).css('display') != 'block') {
    $('form').hide();
  }
  $(selector).animate({
    height: "toggle",
    opacity: "toggle"
  }, "slow");
});