<section class="single-page logins-page">
<div class="row py-5">
<div class="col-md-6 col-12 mx-auto">
<p class="text-muted text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum eius
cupiditate assumenda sed inventore. Eveniet, commodi nam porro ipsam, labore rerum, sunt vero
fugiat obcaecati ipsa a ad vel ipsum.</p>
<div class="row">
<!-- TABS -->
<div class="fui-tabs mt-5">
<div class="col-md-12 mx-auto">
<div class="fui-tab-nav fj-center default">
<button class="fui-tab-link active weight-500" data-tab="tab1">Login</button>
<button class="fui-tab-link weight-500" data-tab="tab2">Sign Up</button>
</div>
</div>
<div class="fui-tab-container">
<!-- SINGLE TAB - add .active class to be shown by default -->
<!-- LOGIN -->
<div id="tab1" class="fui-tab-content active p-2">
<div class="col-md-12 mx-auto">
<form action="">
<div class="row">
<!-- INPUT -->
<div class="col-md-6">
<div class="group">
<label>Username</label>
<input type="text" class="fui-input" placeholder="Username">
</div>
</div>
<!-- INPUT -->
<div class="col-md-6">
<div class="group">
<label>Password</label>
<input type="password" class="fui-input" placeholder="Password">
</div>
</div>
<!-- INPUT -->
<div class="col-md-12">
<div class="group checkbox-group">
<input type="checkbox" value="" id="remember">
<label for="remember">Remember Me</label>
</div>
</div>
<!-- INPUT -->
<div class="col-md-12">
<div class="group">
<input type="submit" class="fui-btn fui-btn-primary" value="Login">
</div>
</div>
</div>
</form>
</div>
</div>
<!-- SIGN UP -->
<div id="tab2" class="fui-tab-content">
<div class="col-md-12 mx-auto">
<form action="">
<div class="row">
<!-- INPUT -->
<div class="col-md-6">
<div class="group">
<label>First Name</label>
<input type="text" class="fui-input" placeholder="First Name">
</div>
</div>
<!-- INPUT -->
<div class="col-md-6">
<div class="group">
<label>Email Address</label>
<input type="email" class="fui-input" placeholder="Email">
</div>
</div>
<!-- INPUT -->
<div class="col-md-6">
<div class="group">
<label>Password</label>
<input type="password" class="fui-input" placeholder="Password">
</div>
</div>
<!-- INPUT -->
<div class="col-md-6">
<div class="group">
<label>Confirm Password</label>
<input type="password" class="fui-input" placeholder="Confirm Password">
</div>
</div>
<!-- INPUT -->
<div class="col-md-12">
<div class="group">
<p class="m-0">By creating an Account you agree to our <a href="">Terms & conditions</a></p>
</div>
</div>
<!-- INPUT -->
<div class="col-md-12">
<div class="group">
<input type="submit" class="fui-btn fui-btn-primary" value="Login">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Insert before the closing </head> tag
<!-- Icon Famous -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/icon-famous/1.0.0-beta.2/iconfamous.css">
<!-- Famous UI -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.css">
Insert before the closing </body> tag
<!-- jQuery -->
<script src="https://cdn.boomcdn.com/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Famous UI -->
<script src="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.js"></script>