JSFiddle - React, Tailwind, and code Playground

by kizer

HTML

<!DOCTYPE html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Live.js Testing Pages</title>

<!--[if gt IE 5.5]>
        <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="style.css">
    
</head>
<body>

<div id="wrapper">
    <form id="form" name="test" action="" method="post">
    
    <ul id="menu">
        <li><a href="#admin" title="Login as an Admin">Admin</a></li>
        <li class="client"><a href="#client" title="Login as a Client">Client</a></li>
        <li><a href="#visitor" title="Login as a Visitor">Visitor</a></li>
    </ul>
    
        <div id="formWrapper">
            <div id="admin" class="hide">
                <label class="no-placeholder-hide">Username</label><input type="text" name="username" placeholder="Username" />
                <label class="no-placeholder-hide">Password</label><input type="password" name="password" placeholder="Password" />
                <input type="submit" value="Login" />
                    <label><p>Keep Login</p><input type="checkbox" name="remember" /></label>
            </div>
        
            <div id="client" class="hide">
                <label class="no-placeholder-hide">Username</label><input type="text" name="username" placeholder="Username" />
                <label class="no-placeholder-hide">Password</label><input type="password" name="password" placeholder="Password" />
                <label class="no-placeholder-hide">PIN</label><input type="text" name="pin" placeholder="Enter PIN Code" />
                <input type="submit" value="Login" />
                    <label><p>Keep Login</p><input type="checkbox" name="remember" /></label>
                
                <ul id="options">
                    <li><a href="#account">Request Account</a></li>
                    <li><a href="#forget">Forgot Password?</a></li>
                </ul>
            </div>

                <div...

CSS

/*    Simple Login HTML & CSS/CSS3 Form v3.0

    Author: Vlad Radulescu
    Author Website: http://vlad.dyndns.org
    
    Content: 
        Admin Login: (Simple) Username, Password
        Client Login: (Advanced) Username, Password, Pin Code, Forgot Password, Request Account
        Visitor Login: (Simple) Username, Password, Pin Code

    Description:    
        Just a simple CSS(3)/HTML Contact Form with 3 Login Options (Admin, Client, Visitor) for custom CMS.
        On the Client page, the user can Request an Account or Retrieve a forgotten password.
    
    Supported Browsers:
        Mozzila Firefox: 3.0 +
        Opera: 11.0 +
        Safari: Not tested, yet.
        Chrome: 10.0 +
        Internet Explorer: 9.0 + (Inlcude ie.css)

*/

/* Reset Styles */

    ul {
        margin: 0;
        padding: 0;
    }

    ul li { display: inline-table; }
    
        .no-placeholder-hide { /* Will appear only if the browser doesn't support placeholders */
            float: left;
            font: bold 14px/100% Tahoma, Geneva, sans-serif;
            color: #305183;
            text-transform: uppercase;
            margin: 0 0 10px 0;
            display: none;
        }

html {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(top, #546673, #1f242a);
    background-image: -moz-radial-gradient(50% 50%, farthest-side, #546673, #1f242a);
    background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 700, from(#546673), to(#1f242a));
    background-image: -o-linear-gradient(#1f242a, #546673);
                      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#546673', endColorstr='#1f242a')";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#546673', endColorstr='#1f242a');
}

    body {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    
        #wrapper {
            margin: 15% auto; 
            width: 400px;
        }
        
            /* Form General...

JavaScript

$(document).ready(function() {
         $('ul#menu li').click(function() {
             $('ul#menu li').removeClass('active');
                 $(this).addClass('active');
         });
     });