Login Sections

<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 &amp; 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>
Dependencies
CSS

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">
Javascript

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>
Tags