Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Credit Card Form - Start">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
</head>
<body>
​
  <form>
​
    <div class="message">Invalid card number (ex: 4242-4242-4242).</div>
​
    <input type='text' name='number' placeholder='Card Number' 
           class='is-error'/>
​
    <input type='text' name='expiry' placeholder='MM-YY'/>
​
    <input type='text' name='cvc' placeholder='CVC'/>
​
​
    <button>Pay $9.99</button>
​
  </form>
​
​
<script src="https://rpominov.github.io/kefir/dist/kefir.min.js"></script>
<script src="https://unpkg.com/can/dist/global/can.all.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
​
</body>
</html>
 
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');
​
​
@font-family: 'Raleway', sans-serif;
@font-size: 1em;
@color-accent: #08d343;
@color-disabled: #999;
@color-error: #fa3737;
@color-focus: #82f5f9;
@color-focus-outline: #ffbdbd;
@padding-vertical: 12px;
​
body {
  background-color: fade(@color-accent, 30%);
  padding: 2%;
  font-family: @font-family;
  font-size: @font-size;
}
​
input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: @font-size;
  font-family: @font-family;
  font-weight: 500;
  padding: @padding-vertical;
  border: 1px solid #ccc;
  outline-color: white;
  transition: background-color 0.5s ease;
  transition: outline-color 0.5s ease;
  &[name=number]{
    border-bottom: 0;
  }
  &[name=expiry], 
  &[name=cvc] {
    width: 50%;
  }
  &[name=expiry] {
    float: left;
    border-right: 0;
  }
  &::placeholder {
    color: #999;
    font-weight: 400;
  }
  &:focus {
    background-color: fade(@color-focus, 10%);
    outline-color: @color-focus;
  }
  &.is-error {
    background-color: fade(@color-error, 10%);
    &:focus {
      outline-color: @color-focus-outline;
    }
  }
}
​
button {
  font-size: @font-size;
  font-family: @font-family;
  background-color: @color-accent;
  border: 0;
  box-shadow: 0px 1px 3px 1px rgba(51,51,51,0.16);
  color: white;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 30px;
  padding: @padding-vertical;
  text-transform: uppercase;
  width: 100%;
  &:disabled {
    opacity: 0.4;
    background-color: @color-disabled;
  }
}
​
form {
  background-color: white;
  box-shadow: 0px 17px 22px 1px rgba(51,51,51,0.16);
  padding: 40px;
  margin: 0 auto;
  max-width: 500px;
}
​
.message {
  margin-bottom: 20px;
  color: @color-error;
}
Output

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

Dismiss x