JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
  Страница и здесь что-то написано.
  <br>Страница и здесь что-то написано.
  <br>Страница и здесь что-то написано.
  <br>Страница и здесь что-то написано.
  <br>Страница и здесь что-то написано.
  <br>Страница и здесь что-то написано.
  <br>Страница и здесь что-то написано.
  <br>Страница и здесь что-то написано.
  <br>
</div>
<a href="#" id="open-popup">Открыть Попап</a>
<div id="popup">
  <a href="#" id="login-btn">Вход</a>
  <a href="#" id="registration-btn">Регистрация</a>
  <a href="#" id="closed-btn">Закрыть</a>
  <form action="" id="login">
    <input type="text">
    <input type="text">
  </form>
  <form action="" id="registration">
    <input type="text">
    <input type="text">
    <input type="text">
  </form>
  <a href="#" id="registration-second">Регистрация</a>
</div>
<div id="grey-bg"></div>

CSS

#registration {
  display: none;
}

#popup {
  display: none;
  position: fixed;
  width: 200px;
  padding: 10px;
  top: 20px;
  left: 50%;
  margin-left: -100px;
  background-color: #eee;
  z-index: 2;
}

#grey-bg {
  display: none;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.active {
  background-color: pink;
}

JavaScript

$(document).ready(function() {
  var openPopupBtn = $('#open-popup');
  var regBtn = $("#registration-btn");
  var loginBtn = $("#login-btn");
  var popup = $("#popup");
  var greyBg = document.getElementById("grey-bg");
  var loginForm = document.getElementById('login');
  var registrationForm = document.getElementById('registration');
  var regSecBtn = document.getElementById('registration-second');

  openPopupBtn.click(function() {
    popup.slideToggle('slow');
    greyBg.style.display = 'block';
    return false;
  });

//  var closedBtn = document.getElementById(;
  function closedPopup() {
    popup.slideToggle('slow');
    greyBg.style.display = 'none';
    return false;
  }

  greyBg.onclick = closedPopup;
  $('#closed-btn').click(closedPopup);

  function registrationTabOpen() {
    registrationForm.style.display = 'block';
    loginForm.style.display = 'none';
    regBtn.attr('class', 'active');
    loginBtn.removeAttr('class');
    return false;
  }

  regBtn.click(registrationTabOpen);
  regSecBtn.click(registrationTabOpen);

  loginBtn.click(function() {
    loginForm.style.display = 'block';
    registrationForm.style.display = 'none';
    loginBtn.attr('class', 'active');
    regBtn.removeAttr('class');
    return false;
  });


});