JSFiddle - React, Tailwind, and code Playground

by Arif Reza

HTML

<div class="page-two">
    <div class="round-bordered mt-3">
          <div class="payment-method-chooser credit-card-chooser">
        <label for="stripe" class="d-flex center-y">
          <div class="flex-grow-1 d-flex center-y">
            <input type="radio" name="Payment_Method" id="stripe">
            <p class="ml-2">Credit/Debit Card</p>
          </div>
          <div class="cards-img">
            <img style="height: 18px;" src="http://project-rich.local/static/images/cards.png" alt="VISA | MasterCard | AMEX">
          </div>
        </label>
      </div>
      <div class="payment-form credit-card-form p-4" id="stripe_form">
        <span id="payment-errors" style="color: red;font-size: 14px;"></span>
        <form action="http://project-rich.local/stripe/charge" method="post" id="payment-form">
          <div class="form-container mb-2">
            <label for="name-element">Cardholder's Name</label>
            <div id="name-element" style="margin-top:10px;margin-bottom:10px;">
            <label for="card-element">Credit or debit card</label>
            <div id="card-element" style="margin-top:10px;margin-bottom:10px;">
            <!-- a Stripe Element will be inserted here. -->
            </div>
            <!-- Used to display form errors -->
            <div id="card-errors" style="margin-top:5px;color:red;"></div>
          </div>
          <input type="hidden" name="item_number" value="-1">
          <input type="hidden" name="item_name" value="MuscleMAX EMS Muscle Toner for Abs, Arms & Glutes">
          <input type="hidden" name="custom" value="UWOdtKuwHPWCNGELDWh167CxYlKClGlA">
          <input type="hidden" name="amount" value="34.99">
          <input type="hidden" name="currency_code" value="USD">
          <input type="submit" id="submit" value="Submit Payment" class="btn btn-primary form-control mt-2 mb-2" /><br />
          <div id="loading_gif" style="display:none;margin:auto;text-align:center" alt="Loading...">
            <i...