Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
<section class="login login--invalid">
  <label class="login__label">
    Username
    <input class="login__input" 
           type="text">
  </label>
  <label class="login__label">
    Password
    <input class="login__input" 
           type="text">
  </label>
  <button class="login__button">Login</button>
</section>
  
</body>
</html>
 
* {
  box-sizing: inherit;
}
​
html {
  box-sizing: border-box;
  font-family: Arial, Helvetica Neue, Helvetica;
}
​
.login {
  margin: 1rem 0;
  padding: 1rem;
  background: lightgray;
}
.login .login__label {
  display: block;
}
.login .login__input {
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: none;
  font-size: 1rem;
}
​
.login .login__button {
  display: block;
  width: 100%;
  padding: 0.5rem;
  margin-top: 2rem;
  background: gray;
  border: none;
  font-size: 1rem;
}
.login--invalid {
  background: salmon;
}
.login--invalid .login__button {
  background: tomato;
}
.login--invalid .login__input {
  background: lightsalmon;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
gionkunzpro
0viewers