JSFiddle - React, Tailwind, and code Playground
by joshmoto
HTML
<form action="/charge" method="post" class="modal-content" id="preorder-form">
<div class="form-group">
<label for="name">Name on card</label>
<div class="input-group">
<input id="card-name" type="text" class="form-control" aria-describedby="input-name" placeholder="Name on card">
</div>
</div>
<div class="form-group">
<label for="card-number">Card Number</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="input-number"><i class="fab fa-cc-visa"></i></span>
</div>
<span id="card-number" class="form-control" aria-describedby="input-name">
<!-- Stripe Card Element -->
</span>
<div class="invalid-feedback">tdtd</div>
</div>
</div>
<div class="form-row">
<div class="col-6">
<div class="form-group">
<label for="card-exp">Expiration</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="input-number"><i class="far fa-calendar"></i></span>
</div>
<span id="card-exp" class="form-control" aria-describedby="input-exp">
<!-- Stripe Card Expiry Element -->
</span>
<div class="invalid-feedback">rtt</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="card-cvc">CVC</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="input-number"><i class="far fa-credit-card"></i></span>
</div>
<span id="card-cvc" class="form-control" aria-describedby="input-cvc">
<!-- Stripe CVC Element -->
</span>
<div...