As you said you need two similar forms but want to handle differently, here is the code I have updated with two forms, you can handle both individually. I have done minor changes in jquery, html and css. I hope it will help you.
<div class="container">
<div class="flat-form">
<ul class="tabs" id="tabs1">
<li>
<a href="#login" class="active">Login</a>
</li>
<li>
<a href="#register">Register</a>
</li>
<li>
<a href="#reset" >Reset Password</a>
</li>
</ul>
<div id="login" class="form-action show1">
<h1>Login on webapp</h1>
<p>
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Maecenas sed diam eget risus varius bladit sit amet non
</p>
<form>
<ul>
<li>
<input type="text" placeholder="Username" />
</li>
<li>
<input type="password" placeholder="Password" />
</li>
<li>
<input type="submit" value="Login" class="button" />
</li>
</ul>
</form>
</div>
<div id="register" class="form-action hide1">
<h1>Register</h1>
<p>
You should totally sign up for our super awesome service.
It's what all the cool kids are doing nowadays.
</p>
<form>
<ul>
<li>
<input type="text" placeholder="Username" />
</li>
<li>
<input type="password" placeholder="Password" />
</li>
<li>
<input type="submit" value="Sign Up" class="button" />
</li>
</ul>
</form>
</div>
<div id="reset" class="form-action hide1">
<h1>Reset Password</h1>
<p>
To reset your password enter your email and your birthday
and we'll send you a link to reset your password.
</p>
<form>
<ul>
<li>
<input type="text" placeholder="Email" />
</li>
<li>
<input type="text" placeholder="Birthday" />
</li>
<li>
<input type="submit" value="Send" class="button" />
</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container">
<div class="flat-form">
<ul class="tabs" id="tabs2">
<li>
<a href="#login1" class="active">Login</a>
</li>
<li>
<a href="#register1">Register</a>
</li>
<li>
<a href="#reset1">Reset Password</a>
</li>
</ul>
<div id="login1" class="form-action show2">
<h1>Login on webapp</h1>
<p>
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Maecenas sed diam eget risus varius bladit sit amet non
</p>
<form>
<ul>
<li>
<input type="text" placeholder="Username" />
</li>
<li>
<input type="password" placeholder="Password" />
</li>
<li>
<input type="submit" value="Login" class="button" />
</li>
</ul>
</form>
</div>
<div id="register1" class="form-action hide2">
<h1>Register</h1>
<p>
You should totally sign up for our super awesome service.
It's what all the cool kids are doing nowadays.
</p>
<form>
<ul>
<li>
<input type="text" placeholder="Username" />
</li>
<li>
<input type="password" placeholder="Password" />
</li>
<li>
<input type="submit" value="Sign Up" class="button" />
</li>
</ul>
</form>
</div>
</div>
</div>
$(function () {
var SHOW_CLASS = 'show1',
HIDE_CLASS = 'hide1',
ACTIVE_CLASS = 'active';
$('#tabs1').on('click', 'li a', function (e) {
e.preventDefault();
var $tab = $(this),
href = $tab.attr('href');
$('.active').removeClass(ACTIVE_CLASS);
$tab.addClass(ACTIVE_CLASS);
$('.show1')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$(href)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
});
});
$(function () {
var SHOW_CLASS = 'show2',
HIDE_CLASS = 'hide2',
ACTIVE_CLASS = 'active';
$('#tabs2').on('click', 'li a', function (e) {
e.preventDefault();
var $tab = $(this),
href = $tab.attr('href');
$('.active').removeClass(ACTIVE_CLASS);
$tab.addClass(ACTIVE_CLASS);
$('.show2')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$(href)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
});
});
@import url(http:
@import url(http:
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 390px;
height: 340px;
position: relative;
font-family: 'Roboto';
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show1 {
display: block;
}
.hide1 {
display: none;
}
.show2 {
display: block;
}
.hide2 {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.button:hover {
background: #1e75aa;
}
.button:active {
background: #136899;
}
::-webkit-input-placeholder {
color: #e74c3c;
}
:-moz-placeholder {
color: #e74c3c;
}
::-moz-placeholder {
color: #e74c3c;
}
:-ms-input-placeholder {
color: #e74c3c;
}
I have used all codes from the link you have provided. If you need any clarification or updation, let me know.