<div class="input-examples">
            <div>
                <h4>Default HTML Input Example</h4>
                <div class="form-group">
                    <label>Credit Card No.</label>
                    <input type="tel" class="form-control input-credit-card" placeholder="Your Credit Card No." value="123455651475555">
                </div>
            </div>

            <div>
                <h4>Cleave.js Formatted Input Example</h4>
                <div class="form-group">
                    <label>Credit Card No.</label>
                    <input type="tel" class="form-control cleave-input-credit-card" placeholder="Your Credit Card No." value="123455651475555">
                </div>
            </div>
        </div>

.input-examples {
  display: flex;
  flex-wrap: wrap;
}
.input-examples>div {
  flex: 1;
  min-width: 300px;
  margin: 1em;
  background: #ececec;
  padding: 0.5em;
}

var cleave = new Cleave('.cleave-input-credit-card', {
    creditCard: true,
    onCreditCardTypeChanged: function (type) {
        // update UI ...
    }
});