JSFiddle - React, Tailwind, and code Playground

Clean CSS Form

by Jennifer Perrin

HTML

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,600' rel='stylesheet' type='text/css' />

    <div class='form'>
      <h1>Sign in</h1>
      <div class='line'></div>
      
      <!-- If you don't want a social buttons, delete all of these code -->
        <a class='btn-facebook' href='#'>Connect with Facebook</a>
        <a class='btn-twitter' href='#'>Connect with Twitter</a>
      <!-- Till here -->
      
      
      <!-- Span class ie-placeholder is there for IE browser. IE doesn't support placeholder attribute -->
      <form class='input-form' action=''>
        <span class='ie-placeholders'>Login:</span><input type='text' placeholder='Login' />
        <span class='ie-placeholders'>Password:</span><input type='password' placeholder='Password' />
        <a class='forgotten-password-link' href='#'>Forgotten password</a>
        <input type='submit' class='btn-sign-in btn-green' value='Sign in' />
      </form>
      
      <!-- FORGOTTEN PASSWORD -->
      <div class='forgotten-password-box'>
        <form class='input-form'>
          <span class='ie-placeholders'>Email:</span><input type='text' class='forgotten-password-email' placeholder='E-mail' />
          <input type='submit' class='btn-orange' value='Send' /><br /><br />
          We'll send you e-mail with password reset.
        </form>
      </div>
      
      <!-- ERROR STATE -->
      <div class='error-box red'>
        <span class='error-message'><b>Incorrect</b> login or password.</span>
      </div>
           
      <div class='sign-link'>
        Don't have an account? <a href='#'>Sign up</a>
      </div> 
    </div>

<!-- --------------------- --><br /><br />

    <div class='form'>
      <h1>Registration</h1>
      <div class='line'></div>
      
      <!-- If you don't want a social buttons, delete all of these code -->
        <a class='btn-facebook' href='#'>Connect with Facebook</a>
        <a class='btn-twitter' href='#'>Connect with Twitter</a>
     ...

CSS

body {
  background-color: #dfdfdf;
  font-size: 13px;
  color: #555;
}

/*Zero margin for everything*/
* { margin: 0; }

body, input, a, h1 { font-family: 'Open Sans', sans-serif; }

a { color: #4f74bf; }
a:hover { text-decoration: none; }

h1 {
  font-size: 20px;
  margin: 0 0 10px 30px;
  padding-top: 20px;
  color: #555;
}

.line {
  margin: 20px 0 20px 30px;
  width: 365px;
  height: 1px;
  background-color: #d7d7d7;
}


.form {
  background-color: #fff;
  width: 430px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  margin: 30px auto;
  
  -moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.25);
}

/*BUTTONS*/

.btn-facebook, .btn-twitter, form input[type="text"], input[type="password"], input[type="submit"] {
  border-radius: 3px;
  -moz-border-radius: 3px;
}

.btn-facebook, .btn-twitter, input[type="submit"] {
  -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
  -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
  color: #fff;
}


.btn-facebook, .btn-twitter {
  float: left;
  padding: 8px 14px 10px 30px;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: 5% 42%;
}

.btn-facebook {
  margin-left: 30px;
  background-color: #3f8ff2;
  background-image:...

JavaScript

/* ****************************************************************
Clean and usable login & register form. It’s very fast using pure CSS. Error handling & social Links.

FEATURES:
- Error handling
- IE version (with no placeholders)
- Social buttons (customizable)
- Place for your logo
- Forgotten password handling
- Buttons states
- Multicolor (5 colors and custom color)
**************************************************************** */

/* ****************************************************************
IE CSS:
-------
.ie-placeholders {
  display: block;
  float: left;
  
  padding: 10px 10px 12px 14px;
  background-color: #e2e2e2;
  border: 1px solid #c8c8c8;
  width: 90px;
  color: #838383;
  margin: 10px -1px 0 0;
  font-size: 15px;
}

form input[type="text"], input[type="password"] {
  width: 221px;
}

.forgotten-password-box input[type="text"]  {
  margin: 10px 10px 0 0;
  width: 100px;
}
**************************************************************** */