JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center960 bottom-margin">
	<div class="row no-margin top-margin">
    	<div class="col-md-12 no-padding no-margin login-reg-tab-holder text-center">
            <div class="col-md-6 login-reg-tab active no-margin no-padding login-button" style="border-right: 2px solid #F2F0F0">
                <p class="login-reg-text">LOGIN</p>
            </div>

            <div class="col-md-6 login-reg-tab no-margin no-padding register-button" style="border-left: 2px solid #F2F0F0">
                <p class="login-reg-text">REGISTER</p>
            </div>
        </div>

            <div class="col-md-9 no-padding no-margin login-reg-input-holder text-center tab-active" id="tab-login">
                <input class="profile-input login-input email-input" placeholder="[email protected]" type="email">
                <br>
                <button class="btn-green-text" id="btn-forgot-password">FORGOT YOUR PASSWORD</button>
                <br>
                <input class="profile-input login-input pass-input" placeholder="Password" type="password"><br>
                <button class="btn-red-filled btn-login" id="btn-login">LOGIN</button><br>
            </div>

            <div class="col-md-9 no-padding no-margin login-reg-input-holder text-center"
            id="tab-register">
                <input class="profile-input login-input email-input" placeholder="[email protected]" type="email"><br>
                <input class="profile-input login-input pass-input" placeholder="Password" type="password"><br>
                <button class="btn-red-filled btn-login btn-register" id="btn-login">CREATE MY ACCOUNT</button><br>
            </div>

            <div class="col-md-3 no-padding no-margin text-center social-networks-holder">
                <p class="or-login-with">OR LOGIN WITH</p>

                <div class="col-md-12 social-network-icon-holder"><img src=
                "assets/google_plus.png"></div>

                <div class="col-md-12...

CSS

/* 
	GREEN 	color: #75CCB4;
	RED 	color: #E76E5D;
	GREY	color: #BEBDC1;
*/



@font-face {
	font-family: 'Montserrat';
	font-weight: 200;
	src: url("../fonts/Montserrat-Hairline.otf") format("opentype");
}
@font-face {
	font-family: 'Montserrat';
	font-weight: 300;
	src: url("../fonts/Montserrat-Hairline.otf") format("opentype");
}
@font-face {
	font-family: 'Montserrat';
	font-weight: 400;
	src: url("../fonts/Montserrat-Light.otf") format("opentype");
}
@font-face {
	font-family: 'Montserrat';
	font-weight: 600;
	src: url("../fonts/Montserrat-Regular.otf") format("opentype");
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	src: url("../fonts/Montserrat-Light.otf") format("opentype");
}
@font-face {
	font-family: 'Montserrat';
	font-weight: 700;
	src: url("../fonts/Montserrat-Black.otf") format("opentype");
}
@font-face {
	font-family: 'Montserrat';
	font-weight: bold;
	src: url("../fonts/Montserrat-Regular.otf") format("opentype");
}
@font-face {
	font-family: 'Montserrat';
	font-weight: bolder;
	src: url("../fonts/Montserrat-Bold.otf") format("opentype");
}
@font-face {
	font-family: 'Montserrat';
	src: url("../fonts/Montserrat-Light.otf") format("opentype");
}
html, body {
	height: 100%;
}
body {
	/*font-family: 'Source Sans Pro', sans-serif;*/
	font-family: 'Montserrat';
	font-style: normal;
	background: #F2F0F0;
	overflow-x: hidden;
}
* {
	outline: none !important;
}
p {
	margin: 0;
	padding: 0;
	color: #48474B;
}





/*
***********************************************************
	HEADER
***********************************************************
*/
.btn-menu-bars {
	display:none;
}
header.header-top {
	width: 100%;
	height: 96px;
	padding-left: 20px;
	padding-top: 30px;
	padding-right: 65px;
	text-align: center;
	background: #FFF;
}
nav.nav-menu-mobile {
	display:none;
}
/* Transparent buttons */
.btn-green-transparent, 
.btn-red-transparent, 
.btn-grey-transparent, 
.btn-white-transparent {
	height: 45px;
	padding: 0px 15px;
	margin-left:...

JavaScript

$(document).ready(function(){
    
    $('.login-button').click(function(){
		
		$('.login-reg-tab').removeClass('active');
		$(this).addClass('active');
		$('.login-reg-input-holder').removeClass('tab-active');
		$('#tab-login').addClass('tab-active');
	});
		
	$('.register-button').click(function(){
		$('.login-reg-tab').removeClass('active');
		$(this).addClass('active');
		$('.login-reg-input-holder').removeClass('tab-active');
		$('#tab-register').addClass('tab-active');
		
	});
});