JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="myApp" ng-controller="hideContainer">
    <a href="#" ng-click="openLogin()" hide-login="hideLoginContainer()">Login</a>
    <div class="loginBox" ng-show="userLogin" style="display:none;" >
        User Login
    </div>
</body>

CSS

body{position:relative;}
.loginBox{z-index:10; background:#cccccc; width:300px; height:260px; padding:10px; position:absolute;}

JavaScript

var myApplication = angular.module('myApp', []);
myApplication.directive('hideLogin', function($document){
  		return {
    		restrict: 'A',
    		link: function(scope, elem, attr, ctrl) {
      			elem.bind('click', function(e) {
        			e.stopPropagation();
      			});
      			$document.bind('click', function() {
        			scope.$apply(attr.hideLogin);
      			})
    		}
  		}
	});

 myApplication.controller('hideContainer',function ($scope){
    $scope.openLogin = function(){
        $scope.userLogin = true;
  	};
     $scope.hideLoginContainer = function(){
        $scope.userLogin = false;
  	};
 });