<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


<div class="credit-card-wrapper">
  <div class="credit-card front">
    <div class="card-title">CREDIT CARD</div>

    <div class="card-number">
      <div class="card-number-label">CARD NUMBER</div>
      <div class="card-numbers">
        <input type="text" class="tbx-number-0" maxlength='4' />
        <input type="text" class="tbx-number-1" maxlength='4' />
        <input type="text" class="tbx-number-2" maxlength='4' />
        <input type="text" class="tbx-number-3" maxlength='4' />
      </div>
    </div>

    <div class="card-expiration">
      <div class="card-expiration-label">
        <div>VALID</div>
        <div>THRU</div>
      </div>
      <div class="card-expiration-month">
        <div class="card-expiration-month-label">MONTH</div>
        <select class='drp-expiration-month'>
          <option value="01">01</option>
          <option value="02">03</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select> 
      </div>
      <div class="card-expiration-slash">/</div>
      <div class="card-expiration-year">
        <div class="card-expiration-year-label">YEAR</div>
        <select class='drp-expiration-year'>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
        </select>
      </div>
    </div>
  </div>
  <div class="credit-card back unfocused">
     <div class="magnetic-strip"></div>
    <div class="credit-card-ccv">
      <div class="credit-card-ccv-label">CCV CODE</div>
      <div class="credit-card-ccv-strip">
        <div class="credit-card-ccv-box"></div>
        <input type="text" class="tbx-ccv"  maxlength='4'/>
        <div class="credit-card-ccv-prefix">XXXX</div>
      </div>
    </div>
  </div>
</div>
* {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
  Helvetica, Arial, "Lucida Grande", sans-serif;
}

input, select {  
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border: 0;
  border-radius: 0;
  outline: none;
}

@mixin animate($what, $duration, $type) {
  -webkit-transition: $what $duration $type;
  -moz-transition: $what $duration $type;
  -o-transition: $what $duration $type;
  -ms-transition: $what $duration $type;
  transition: $what $duration $type;
}

@mixin drop-shadow($h, $v, $blur, $spread, $color) {
  -moz-box-shadow: $h $v $blur $spread $color;
  -webkit-box-shadow: $h $v $blur $spread $color;
  box-shadow: $h $v $blur $spread $color;
}

@mixin skew($x, $y) {
 -moz-transform:    skew($x, $y);
 -o-transform:      skew($x, $y);
 -webkit-transform: skew($x, $y);
 transform:         skew($x, $y);
}

$margin: 24px;

.credit-card-wrapper {
  $card-height: 240px;
  $golden-ratio: 1.618;
  $focused-color: #3d89b8;
  $unfocused-color: #337099;
  
  .credit-card {
    @include drop-shadow(0px, 0px, 10px, 2px, #000);
    background: $focused-color;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    position: absolute;
    height: $card-height;
    width: $card-height * $golden-ratio;
    
    @include animate(all, 1s, ease);
    
    &.unfocused {
      background: $unfocused-color;
    }
  }
  
  .front {
    top: 100px;
    left: 100px;
    z-index: 2;

    .card-title {
      font-size: 18px;
      font-weight: bolder;
      margin: $margin 0 0 $margin;
    }

    .card-number {
      padding: $margin / 2 $margin 0;

      .card-number-label {
        margin: $margin / 8 0 $margin / 4;
      }

      input {
        background: darken(#3d89b8, 10%);
        border-radius: 4px;
        border: 1px solid #ccc;
        color: white;
        font-size: 30px;
        margin: 0 $margin / 8 0 0;
        padding: $margin / 8;
        width: 70px;
      }
    }

    .card-expiration {
      padding: $margin / 2 $margin $margin;

      &> div {
        float: left;
        padding: $margin / 8;
      }

      .card-expiration-label {
        padding-top: $margin * 1.35;
      }
      
      .card-expiration-month, .card-expiration-year {
        &:after {
          position: absolute;
          bottom: 42px;
          font-family: 'FontAwesome';
          content: '\f063';
          pointer-events: none;
        }
      }
      
      .card-expiration-month:after {
        left: 118px;
      }
      
      .card-expiration-year:after {
        left: 218px;
      }
      
      .card-expiration-month-label {
        margin-bottom: $margin / 4;
      }

      .card-expiration-year-label {
        margin-bottom: $margin / 4;
      }

      .card-expiration-slash {
        font-size: 32px;
        padding: $margin * 1.28 $margin / 4;
      }

      select {
        background: darken(#3d89b8, 10%);
        border-radius: 4px;
        border: 1px solid gray;
        color: white;
        font-size: 30px;
        padding: $margin / 8 $margin / 2 $margin / 8 $margin / 3;
        width: 70px;
      }
    }
  }

  .back {
    top: 70px;
    left: 300px;
    z-index: 1;

    .magnetic-strip {
      background: #111;
      margin-top: $margin;
      height: 60px;
      width: 100%;
    }
    
    .credit-card-ccv {
       text-align: right;
      
      .credit-card-ccv-label {
        padding: $margin / 2 $margin $margin / 4;
      }
      
      .credit-card-ccv-strip {
        margin: 0 $margin;
        height: 60px;
        background: rgba(255, 255, 255, 0.4);
      }
      
      .credit-card-ccv-prefix {
        color: black;
        float: right;
        font-size: 24px;
        letter-spacing: 2.5px;
        padding: $margin / 1.6 $margin / 2;
        @include skew(10deg, 0);
      }
      
      .credit-card-ccv-box {
        background: white;
        position: absolute;
        top: 125px;
        right: $margin + 5px;
        content: '';
        border-radius: 4px;
        border: 1px solid gray;
        height: 46px;
        width: 80px;
      }
      
      input {
        float: right;
        background: transparent;
        border-radius: 4px;
        color: black;
        font-size: 26px;
        margin: $margin / 4 0 0 0;
        padding: $margin / 3;
        width: 70px;
        @include skew(10deg, 0);
      }
    }
  }
}
View Compiled
var CreditCard = (function() {
  
  var init = function() {
    $('.credit-card.front input, .credit-card.front  select').on('focus', front_focus);
    $('.credit-card.back input').on('focus', back_focus);
  };
  
  var front_focus = function() {
    $('.credit-card.back').addClass('unfocused');
    $(this).closest('.credit-card').removeClass('unfocused');
  };
  
  var back_focus = function() {
    $('.credit-card.front').addClass('unfocused');
    $(this).closest('.credit-card').removeClass('unfocused');
  };
  
  return {
    init: init
  }
  
}());

$(CreditCard.init);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js