JSFiddle - React, Tailwind, and code Playground

Simple Login/Register/Reset Pass

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css">
<!-- 
  -----------
  Visit Patternwall.net for free background patterns! 
  -----------
-->

<div class="box">
  <nav id="tabs" class="tabs">
    <a id="tabLogin" class="iconLogin active blueBox" title="Login now"></a>
    <a id="tabRegister" class="iconRegister greenBox" title="Create a new account"></a>
    <a id="tabForgot" class="iconForgot redBox" title="Who am i?"></a>
  </nav>

  <div class="containerWrapper">
  
    <!-- login container -->
    <div id="containerLogin" class="tabContainer active">
      <form action="do some action here!">
      <h2 class="loginTitle">Login</h2>
      <div class="loginContent">
        <div class="inputWrapper">
          <input type="text" placeholder="Your name" />
        </div>
        <div class="inputWrapper">
          <input type="password" placeholder="Your password"/>
        </div>
      </div>
      <button class="blueBox"><span class="iconLogin"></span> Login</button>
      <div class="clear"></div>
    </form>
    </div>

    <!-- register container -->
    <div id="containerRegister" class="tabContainer">
      <form action="do some action here!">
        <h2 class="loginTitle">Create Account</h2>
        <div class="registerContent">
          <div class="inputWrapper">
            <input type="text" placeholder="Desire name" />
          </div>
          <div class="inputWrapper">
            <input type="password" placeholder="Register mail"/>
          </div>
        </div>
        <button class="greenBox"><span class="iconRegister"></span> Register</button>
        <div class="clear"></div>
      </form>
    </div>
    <div class="clear"></div>

    <!-- forgot container -->
    <div id="containerForgot" class="tabContainer">
      <form action="do some action here!">
        <h2 class="loginTitle">Forgotten All?</h2>
        <div class="loginContent">
          <div class="inputWrapper">
        ...

CSS

/*
  FontAwesome - The best icon font ever :)
  http://fortawesome.github.io/Font-Awesome/

  Thanks to Dave Gandy and all involved in FontAwesome !!!
*/
[class^="icon"], [class*=" icon"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
}

.iconLogin:before {
  content: "\f090";
}

.iconRegister:before {
  content: "\f067";
}

.iconForgot:before {
  content: "\f128";
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.patternwall {
  position: absolute;
  top: 20px;
  right: 20px;
}

body {
  font: 14px/22px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: url(http://www.patternwall.net/img/patterns/02_dark_gray/005.png) left top;
}

.clear {
  clear: both;
}

.box {
  width: 300px;
  margin: 60px auto;
  position: relative;
  z-index: 1;
}

.tabs {
  position: absolute;
  z-index: 2;
  top: 0;
  left: -34px;
}
.tabs a {
  position: relative;
  height: 30px;
  width: 36px;
  display: block;
  margin-bottom: 10px;
  padding-top: 3px;
  cursor: pointer;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-box-shadow: 0 0 2px #1a1a1a;
  -moz-box-shadow: 0 0 2px #1a1a1a;
  box-shadow: 0 0 2px #1a1a1a;
}
.tabs a.active, .tabs a:hover {
  margin-left: -3px;
}
.tabs a:before {
  font-size: 14px;
  color: white;
  padding-left: 10px;
}

.blueBox {
  color: white;
  border: solid 1px #0083ff;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0083ff), color-stop(100%, #0073e0));
  background: -webkit-linear-gradient(#0083ff, #0073e0);
  background: -moz-linear-gradient(#0083ff, #0073e0);
  background: -o-linear-gradient(#0083ff, #0073e0);
  background: linear-gradient(#0083ff, #0073e0);
}

.greenBox {
  color: white;
  border: solid 1px #57c100;
 ...

JavaScript

$("#tabs").on("click", "a", function(){
  var me = $(this);

  $(".active").removeClass("active");
  me.addClass("active");
  $("#" + me.attr("id").replace("tab", "container")).addClass("active");
  return false;
});