JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="http://angularlight.org/bin/alight_0.10.last.min.js"></script>
<div class="auth reg" al-app>
    <div al-hide="loginVisible">
        <h1>REGISTRATION FORM</h1>
        <label><input type="text"> Login</label>
        <label><input type="password"> Password</label>
        <label><input type="password"> Password 2</label>
    </div>
    <div al-show="loginVisible">
        <h1>LOGIN FORM</h1>
        <label><input type="text"> Login</label>
        <label><input type="password"> Password</label>
    </div>
    <div class="controls">
        <div al-click="loginVisible=true" class="btn">Show login</div>
        <div al-click="loginVisible=false" class="btn">Show registration</div>
    </div>
</div>

CSS

.auth .btn {
    float: left;
    padding: 5px 10px;
    margin: 3px;
    background: gray;
    color: white;
    font-weight: bold;
    cursor: pointer;
}
.auth > div { height: 200px; }
.auth > div label { display: block; }