Gigaclear Pattern Library

Payment Form 

<div class="component-spacer-margin">
    <div class="container">
        <div class="max-w-screen-sm mx-auto">
            <div class="mb-6">
                <h2 class="text-4xl block font-heading font-extrabold leading-tight text-alpha  mb-4 lg:mb-6">Make an online payment here</h2>
                <div class="prose max-w-full">
                    <p>
                        To make a payment to your account, please use your customer number, which you can find on your bill.
                    </p>
                    <p>
                        Please enter the amount in this format: XX.XX (without a £ symbol)
                    </p>
                </div>
            </div>
            <form>
                <div class="flex flex-col gap-4">
                    <label class="block">
                        <span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Amount</span>
                        <input type="text" required class="
                    block
                    w-full
                    rounded-lg
                    border-grey-400
                    p-4
                    default-focus focus-within:ring-black" placeholder="35.00">
                    </label>
                    <label class="block">
                        <span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Customer Number</span>
                        <input type="text" required class="
                    block
                    w-full
                    rounded-lg
                    border-grey-400
                    p-4
                    default-focus focus-within:ring-black" placeholder="13278833">
                    </label>
                </div>
                <div class="mt-8 text-center">

                    <button class="btn group  bg-alpha text-white border-2 border-alpha">

                        <div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">

                            Pay now

                        </div>
                        <div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
                            <svg class="w-full h-full fill-current" aria-hidden="true">
                                <use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
                            </svg>
                        </div>

                    </button>

                </div>
            </form>
        </div>

    </div>
</div>
 
<div class="component-spacer-margin">
    <div class="container">
        <div class="max-w-screen-sm mx-auto">
            <div class="mb-6">
                <h2 class="text-4xl block font-heading font-extrabold leading-tight text-alpha  mb-4 lg:mb-6">Make an online payment here</h2>
                <div class="prose max-w-full">
                    <p>
                        To make a payment to your account, please use your customer number, which you can find on your bill.
                    </p>
                    <p>
                        Please enter the amount in this format: XX.XX (without a £ symbol)
                    </p>
                </div>
            </div>
            <form>
                <div class="flex flex-col gap-4">
                    {% render "@text-input", { "label": "Amount", placeholder: '35.00', required: true } %}
                    {% render "@text-input", { "label": "Customer Number", placeholder: '13278833', required: true } %}
                </div>
                <div class="mt-8 text-center">
                    {% render "@button", { renderAsButton: true, text: 'Pay now' }, true %}
                </div>
            </form>
        </div>

    </div>
</div>
 
{
  "siteName": "Gigaclear Pattern Library"
}

No notes defined.