JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/3.0.0/jquery.payment.min.js"></script>
<div class="container">
  <form>
    <div class="field field-1">
      <label>Name</label>
      <input type="text" id="card-name" required />
    </div>
    <div class="field field-2">
      <label>Card Number</label>
      <input class="visa" type="text" id="card-number" pattern="[0-9]{13,16}" required/>
    </div>
    <div class="field-container">
      <div class="field field-3">
      <label>Expires</label>
      <input type="text" id="card-expiry" pattern="{5,6}" required />
    </div>
    <div class="field field-4">
      <label>CVC Code</label>
      <input type="text" id="card-cvc" pattern="[0-9]{3,5}" required/>
      <a class="question" href="#"><img src="http://placehold.it/30" /></a>
    </div>
    </div>
  </form>
</div>

SCSS

@font-face {
  font-family: 'TradeGothicLT';
  src: url('http://www.alphaformen.com/fonts/TradeGothicLT.eot'); /* IE9 Compat Modes */
  src: url('http://www.alphaformen.com/fonts/TradeGothicLT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://www.alphaformen.com/fonts/TradeGothicLT.woff') format('woff'), /* Pretty Modern Browsers */
       url('http://www.alphaformen.com/fonts/TradeGothicLT.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('http://www.alphaformen.com/fonts/TradeGothicLT.svg#TradeGothicLT') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'TradeGothicLTPro-Bold';
  src: url('http://www.alphaformen.com/fonts/TradeGothicLTPro-Bold.eot'); /* IE9 Compat Modes */
  src: url('http://www.alphaformen.com/fonts/TradeGothicLTPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://www.alphaformen.com/fonts/TradeGothicLTPro-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('http://www.alphaformen.com/fonts/TradeGothicLTPro-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('http://www.alphaformen.com/fonts/TradeGothicLTPro-Bold.svg#TradeGothicLTPro-Bold') format('svg'); /* Legacy iOS */
}


* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

form {
  border: 3px solid #ccc;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: white;
  width: 100%;
  margin-bottom: -106px;
}

input {
  border: none;
  padding: 10px;
  font-size: 1.3em;
  color: lighten(black, 50%);
  font-weight: 300;
  width: 100%;
  padding-right: 80px;
  font-family: "TradeGothicLT";
}

.field {
  border: 1px solid #ccc;
  padding: 20px;
  position: relative;
  &.field-2 {
    input {
      &.visa {
          background:...

JavaScript

$(function() {
	$('input#card-number').payment('formatCardNumber');
  $('input#card-expiry').payment('formatCardExpiry');
  $('input#card-cvc').payment('formatCardCVC');
});