JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://js.iugu.com/v2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formatter.js/0.1.5/formatter.min.js"></script>
<!--
Using Formatter.js - Iugu detecta e melhora o input de Cartão:
http://firstopinion.github.io/formatter.js/
-->
<form id="payment-form" target="_blank" action="https://<-- seu servico -->" method="POST">
    <div class="usable-creditcard-form">
      <div class="wrapper">
        <div class="input-group nmb_a">
          <div class="icon ccic-brand"></div>
            <input autocomplete="off" class="credit_card_number" data-iugu="number" placeholder="Número do Cartão" type="text" value="" />
          </div>
        <div class="input-group nmb_b">
          <div class="icon ccic-cvv"></div>
            <input autocomplete="off" class="credit_card_cvv" data-iugu="verification_value" placeholder="CVV" type="text" value="" />
        </div>
        <div class="input-group nmb_c">
          <div class="icon ccic-name"></div>
            <input class="credit_card_name" data-iugu="full_name" placeholder="Titular do Cartão" type="text" value="" />
        </div>
        <div class="input-group nmb_d">
          <div class="icon ccic-exp"></div>
            <input autocomplete="off" class="credit_card_expiration" data-iugu="expiration" placeholder="MM/AA" type="text" value="" />
        </div>
      </div>
      <div class="footer">
        <img src="https://s3-sa-east-1.amazonaws.com/storage.pupui.com.br/9CA0F40E971643D1B7C8DE46BBC18396/assets/cc-icons.e8f4c6b4db3cc0869fa93ad535acbfe7.png" alt="Visa, Master, Diners. Amex" border="0" />
        <a class="iugu-btn" href="http://iugu.com" tabindex="-1"><img src="https://s3-sa-east-1.amazonaws.com/storage.pupui.com.br/9CA0F40E971643D1B7C8DE46BBC18396/assets/payments-by-iugu.1df7caaf6958f1b5774579fa807b5e7f.png" alt="Pagamentos por Iugu" border="0" /></a>
      </div>
    </div>

    <div class="token-area">
        <label for="token">Token do Cartão de Crédito - Enviar para...

CSS

/* Non Credit Card Form */
body,html { padding:0px;margin:0px; }
body { padding: 40px;font-family: Arial;font-size: 14px; background: #FFF }

/* Credit Card Form */
.usable-creditcard-form, .usable-creditcard-form * {
    font-size: 13px;
}
.usable-creditcard-form {
    position: relative;
    padding: 0px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.usable-creditcard-form .wrapper {
    border: 1px solid #CCC;
    border-top: 1px solid #AAA;
    border-right: 1px solid #AAA;
    height: 74px;
    width: 300px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.usable-creditcard-form .input-group {
    position: absolute;
    top: 300px;
}
.usable-creditcard-form .input-group.nmb_a {
    position: absolute;
    width: 200px;
    top: 0px;
    left: 0px;
}
.usable-creditcard-form .input-group.nmb_b {
    position: absolute;
    width: 100px;
    top: 0px;
    right: 0px;
}
.usable-creditcard-form .input-group.nmb_b input,
.usable-creditcard-form .input-group.nmb_d input {
    text-align: center;
}
.usable-creditcard-form .input-group.nmb_c {
    position: absolute;
    width: 200px;
    top: 37px;
    left: 0px;
}
.usable-creditcard-form .input-group.nmb_d {
    position: absolute;
    width: 100px;
    top: 37px;
    right: 0px;
}
.usable-creditcard-form input {
    background: none;
    display: block;
    width: 100%;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin:0px;
    padding-left: 35px;
    border: none;
}
.usable-creditcard-form .input-group .icon {
    position: absolute;
    width: 22px;
    height: 22px;
    background: #CCC;
    left: 8px;
    top: 7px;
}
.usable-creditcard-form .input-group.nmb_a input {
    border-right: 1px solid #ECECEC;
}
.usable-creditcard-form .input-group.nmb_c input {
    border-top: 1px solid #ECECEC;
    border-right: 1px solid...

JavaScript

Iugu.setAccountID("COLOCAR SEU ACCOUNT ID AQUI");

jQuery(function($) {
  $('#payment-form').submit(function(evt) {
      var form = $(this);
      var tokenResponseHandler = function(data) {
          
          if (data.errors) {
              alert("Erro salvando cartão: " + JSON.stringify(data.errors));
          } else {
              $("#token").val( data.id );
              form.get(0).submit();
          }
          
          // Seu código para continuar a submissão
          // Ex: form.submit();
      }
      
      Iugu.createPaymentToken(this, tokenResponseHandler);
      return false;
  });
});