<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="login-form"> <div class="container"> <div class="row"> <div class="col-lg-6 col-lg-offset-3"> <div class="inner-form"> <ul class="nav nav-tabs"> <li class="active"> <a href="#login" data-toggle="tab" aria-expanded="true">LOGIN</a> </li> <li> <a href="#signup" data-toggle="tab" aria-expanded="false">SIGN UP</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade active in" id="login"> <div class="panel-group"> <form> <div class="row"> <div class="col-12"> <label>Name</label> <input type="text" name="name" class="form-control"> </div> <div class="col-12"> <label>E-Mail</label> <input type="email" name="email" class="form-control"> </div> <div class="col-12"> <button type="submit" class="btn btn-default">Login</button> </div> <div class="col-12"> <div class="forgot"> <a href="#">Forgot Password ?</a> </div> </div> </div> </form> </div> </div> <div class="tab-pane fade" id="signup"> <div class="panel-group"> <form> <div class="row"> <div class="col-12"> <label>Name</label> <input type="text" name="name" class="form-control"> </div> <div class="col-12"> <label>Surname</label> <input type="text" name="password" class="form-control"> </div> <div class="col-12"> <label>E-Mail</label> <input type="email" name="email" class="form-control"> </div> <div class="col-12"> <label>Password</label> <input type="password" name="password" class="form-control"> </div> <div class="col-12"> <button type="submit" class="btn btn-default">Sign Up</button> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Poppins'); body { font-family: 'Poppins', sans-serif; } .login-form .inner-form { background: #FFF; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4); padding: 80px; } .login-form .inner-form .nav-tabs li a { border: none; color: #00a899; cursor: pointer; font-size: 16px; } .login-form .inner-form .nav-tabs li a:hover { background: #00a899; color: #FFF; } .login-form .inner-form .form-control { background-color: #f5f5f5; box-shadow: none; color: #565656; font-size: 14px; margin-bottom: 30px; padding: 30px 10px; } .login-form .inner-form .btn { background: #00a899; border: none; border-radius: 6px; color: #FFF; margin-bottom: 20px; padding: 10px 40px; text-transform: uppercase; } .login-form .inner-form .nav-tabs { border: none; display: table; margin: 0 auto 20px; }