JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css">
<!-- main login area -->
<div class="panel panel-primary in" id="loginArea">
    <div class="panel-heading">
        <h3 class="panel-title">Login</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal" id="loginForm">
            
            <div class="form-group">
                <label for="loginUsername" class="col-sm-3 control-label">Username</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="loginUsername" />
                </div>
            </div>
            
            <div class="form-group">
                <label for="loginPassword" class="col-sm-3 control-label">Password</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="loginPassword" />
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-lg-offset-2 col-lg-10 text-right">
                    <button type="submit" class="btn btn-primary">Login</button>
                </div>
            </div>
            
        </form>
    </div>
</div>

<!-- initially collapsed panel. After button click, the form for a new user will expanded and the main login area collapsed. -->
<div class="panel" id="newUserPanelWrapper">
    
    <div class="panel-heading">
        <div class="row">
            <div class="col-xs-7" style="padding: 5px 10px;">
                <span class="text-muted">No credentials?</span>
            </div>
            <div class="col-xs-5 text-right">
                <button type="button" class="btn btn-default" onclick="newUserAreaClicked()">Create new user</button>
            </div>
        </div>
    </div>
    
    <div class="panel-body collapse" id="newUserPanel">
     ...

JavaScript

newUserAreaClicked = function () {
    $("#newUserPanel").collapse('show')
    $("#loginArea").collapse('hide')
}

cancelUserCreationClicked = function () {
    $("#loginArea").collapse('show');
    $("#newUserPanel").collapse('hide');
}