JSFiddle - React, Tailwind, and code Playground

by gabs00

HTML

<div ng-app="myApp">
    
        <div my-Auth>
    
            <div ng-show="active">
                <form name="login">
                    <input type="email" ng-model="email" placeholder="[email protected]" required />
                    <input type="password" ng-model="passwd" required />
                    <button ng-disabled="!login.$valid">Login</button>
                </form>
                <a href="#" ng-click="toggle()">forgot password?</a>
            </div>
            
            <div ng-show="!active">
                <form name="forgot">
                    <input type="email" ng-model="email" placeholder="[email protected]" required />
                    <button ng-disabled="!forgot.$valid">Reset Password</button>
                </form>
                <a href="#" ng-click="toggle()">access</a>
            </div>
        </div>
    </div>

CSS

form input, form button, a{
    float:left;
    clear:both;
    margin-top: 5px;
    width:160px;
}

JavaScript

angular.module('myApp', [])
    .directive('myAuth', function(){
        return {
            link: function(scope, elem, attr){
               scope.active = true;
               scope.toggle = function(){
                   scope.active = !scope.active;
               };
            }
        };
    });