JSFiddle - React, Tailwind, and code Playground

by harsh dand

HTML

<header id="header">
    <div class="header-top-bar">
      <div class="container">
                <!-- HEADER-LOGIN -->
        <div class="header-login">
            <a href="#" class=""><i class="fa fa-power-off"></i> Login</a>
            <div>
                <form action="#">
                    <input type="text" class="form-control" placeholder="Username">
                    <input type="password" class="form-control" placeholder="Password">
                    <input type="submit" class="btn btn-default" value="Login"> <a href="#" class="btn btn-link">Forgot Password?</a>
                </form>
            </div>
        </div>
                </header>

CSS

#header .header-top-bar .header-login div,
 #header .header-top-bar .header-register div {
  top: 80px;
  display:none;
}
   
#header .header-top-bar .header-login.active div,
#header .header-top-bar .header-register.active div {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

JavaScript

var $headerLoginRegister = $('#header .header-login, #header .headerregister');

	$headerLoginRegister.each(function () {
     var $this = $(this);

     $this.children('a').on('click', function (event) {
         event.preventDefault();
         $this.toggleClass('active');
     });

     $this.on('clickoutside touchendoutside', function () {
         if ($this.hasClass('active')) {
             $this.removeClass('active');
         }
     });
 });



  var $headerNavbar = $('#header .header-nav-bar .primary-nav > li');

  $headerNavbar.each(function () {
    var $this = $(this);

    $this.children('a').on('click', function (event) {
      $this.toggleClass('active');
    });

    $this.on('clickoutside touchendoutside', function () {
      if ($this.hasClass('active')) { $this.removeClass('active'); }
    });
  });