<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-8 offset-md-2 mt-5 fancy-forms"> <!-- <div class="cardbox"> --> <ul class="nav nav-tabs mt-3" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="login" data-toggle="tab" href="#login_form" role="tab" aria-controls="login" aria-selected="true">Login</a> </li> <li class="nav-item"> <a class="nav-link" id="signup" data-toggle="tab" href="#signup_form" role="tab" aria-controls="signup" aria-selected="false">SignUp</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="login_form" role="tabpanel" aria-labelledby="login"> <div class="fancyformcontainer"> <h3 class="text-center">Login</h3> <form> <div class="form-group mt-4"> <label for="email_id">Email address</label> <input type="email" class="form-control" id="email_id" placeholder="Enter valid email address"> </div> <div class="form-group mt-4"> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Please provide password"> </div> <div class="text-center"> <button type="submit" class="btn formsubmitbtn">Submit</button> </div> </form> </div> </div> <div class="tab-pane fade" id="signup_form" role="tabpanel" aria-labelledby="signup"> <div class="fancyformcontainer"> <h3 class="text-center">Sign Up</h3> <form> <div class="form-group mt-4"> <label for="email_id">Email address</label> <input type="email" class="form-control" id="email_id" placeholder="Enter valid email address"> </div> <div class="form-group mt-4"> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Please provide password"> </div> <div class="form-group mt-4"> <label for="password">Confirm Password</label> <input type="password" class="form-control" id="confirm password" placeholder="Please retype password and try agaib"> </div> <div class="text-center"> <button type="submit" class="btn formsubmitbtn">Submit</button> </div> </form> </div> </div> </div> <!-- </div> --> </div> </div> </div>

.fancy-forms .tab-content{ background: #ffffff; color: #ffffff; padding: 10px; box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.3); } .fancy-forms .nav-tabs .nav-item{ width: 50%; text-align: center; } .fancy-forms .nav-tabs .nav-link{ border: 1px solid #e47a4b; background-color: #e47a4b; border-top-left-radius: 0; border-top-right-radius: 0; color: #ffffff; box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3); } .fancy-forms .nav-tabs .nav-link.active{ border-color: #fff; color: #e47a4b; background-color: #ffffff; } .fancy-forms .nav-tabs .nav-link:hover{ border-color: #fff; } fancy-forms .nav-tabs .nav-link.active:hover{ border-color: #e47a4b; } .fancyformcontainer{ background: #e6c3b4; padding: .5rem 3rem !important; margin: 3rem !important; } .formsubmitbtn{ background: #e47a4b; color: white; margin-bottom: 1.5rem !important; } .formsubmitbtn:hover,.formsubmitbtn:focus{ color: #fff; }