JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<header class="clearfix">
        <nav>
            <ul id="tabs">
                <li id="login">
                    <a href="" id="login-trigger" class="trigger">Log in <span>▼</span></a>                                
                </li>
                <li id="signup">
                    <a href=""  id="singup-trigger" class="trigger">Sign up FREE <span>▼</span></a>                    
                </li>
            </ul>    
            <div class="tabContent">
                <div id="login-content" class="formContent">
                  <form>
                     <fieldset class="inputs">
                        <input id="username" type="email" name="Email" placeholder="Your email address" required class="inputText">
                        <input id="password" type="password" name="Password" placeholder="Password" required class="inputText">
                     </fieldset>
                     <fieldset class="actions">
                        <input type="submit" id="loginBtn" value="Log in" class="btn">
                        <label><input type="checkbox" checked="checked"> Keep me signed in</label>
                     </fieldset>
                  </form>
                </div>
                
                <div id="signup-content" class="formContent">
                  <form>
                     <fieldset class="inputs">
                        <input id="fullname" type="text" name="fullname" placeholder="Your Full Name" required class="inputText">
                                <input id="email" type="email" name="Email" placeholder="Your email address" required class="inputText">
                        <input id="password2" type="password" name="Password2" placeholder="Password" required class="inputText">
                     </fieldset>
                     <fieldset class="actions">
                        <input type="submit" id="signupBtn" value="Sign up" class="btn">
                        <label><input type="checkbox"...

CSS

* {
            margin: 0;
            padding: 0;
        }
        html, body    {
            height: 100%;
        }
        body{
            font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
            margin: 0;
            background-color: #d9dee2;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#ebeef2), to(#d9dee2));
            background-image: -webkit-linear-gradient(top, #ebeef2, #d9dee2);
            background-image: -moz-linear-gradient(top, #ebeef2, #d9dee2);
            background-image: -ms-linear-gradient(top, #ebeef2, #d9dee2);
            background-image: -o-linear-gradient(top, #ebeef2, #d9dee2);
            background-image: linear-gradient(top, #ebeef2, #d9dee2);
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ebeef2, endColorstr=#d9dee2);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ebeef2, endColorstr=#d9dee2)";
        }
        fieldset {
            border: 0 none;
            margin: 0;
            padding: 0;
        }
        input:focus, textarea:focus {
            outline: medium none;
        }
        .clearfix:before,
        .clearfix:after {
            content:"";
            display:table;
        }
        .clearfix:after {
            clear:both;
            overflow:hidden;
        }
        .clearfix {
            zoom:1;
        }
                
        header {
            display: block;
            padding: 8px 10%;
            border-bottom: 1px solid #fff;
            background-color: #777;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#777), to(#555));
            background-image: -webkit-linear-gradient(top, #777, #555);
            background-image: -moz-linear-gradient(top, #777, #555);
            background-image: -ms-linear-gradient(top, #777, #555);
            background-image: -o-linear-gradient(top, #777,...

JavaScript

$(function(){
           

         $("#tabs li").click(function(event){
             $(this).children("a").find("span").html("&#x25B2;");
             $(this).siblings("li.active").children("a").find("span").html("&#x25BC;");
             $(this).addClass("active").siblings("li.active").removeClass("active");
             $(".formContent").hide();
             var activeFormContent = $(this).attr("id") + "-content";
             var loginForm = $("#" + activeFormContent).slideToggle();
             event.preventDefault();
             event.stopPropagation();
             $(document).bind('click', function() {
                 $(document).unbind('click');
                 $('#singup-trigger').find('span').html("&#x25BC;");
                         $('#login-trigger').find('span').html("&#x25BC;");
                         $("#tabs li.active").removeClass("active");
                 $('.formContent').slideUp();
                         
             });
             //return false;
         });
          $(".formContent").click(function(e){
              e.stopPropagation();
          });
        
                                                                     
        });