Home
Mr Robot
Payment form (Alpine JS)

Payment form (Alpine JS)

This tailwind example is contributed by Mr Robot, on 01-Sep-2022. Component is made with Tailwind CSS v3.

Form eCommerce

Author Mr Robot

10.2k

Fork Fullscreen

<div class="flex flex-col sm:flex-row items-start sm:items-center">
        <label class="w-full sm:w-1/3 block sm:flex sm:flex-row sm:flex-col sm:mr-2 mb-2 sm:mb-0 text-left sm:text-right">
            Plan <a href="#" class="text-blue-500 underline">see features</a>
        </label>

<label for="plan-monthly" class="my-1">
                <input x-on:click="selected = 'opt2'" id="plan-monthly" type="radio" name="plan" value="premium-monthly">
                Monthly - <strong>$10</strong> / month
            </label>

<label for="plan-yearly" class="my-1 mb-0">
                <input x-on:click="selected = 'opt3'" id="plan-yearly" type="radio" name="plan" value="premium-yearly">
                Yearly - <strong>$95</strong> / year <span class="text-green-500">- save <strong>$25</strong> per year</span>
            </label>
        </div>
    </div>

<div x-show="selected !== 'opt1'" x-cloak class="flex flex-col sm:flex-row items-center mb-4">
        <label x-show="selected !== 'opt1'" x-cloak for="card-element" class="w-full sm:w-1/3 sm:mr-2 mb-2 sm:mb-0 sm:text-right">
            Credit or debit card
        </label>
        <div x-show="selected !== 'opt1'" x-cloak id="card-element" class="w-full sm:w-2/3 sm:ml-2">
            
            <input id="card-element" name="card-element" placeholder="Card number" class="w-full p-2 rounded shadow-inner border">
        </div>
    </div>

<div class="mt-2 text-right">
        <button
            id="card-button"
            name="submitPayment"
            type="submit"
            data-secret="{{ $intent->client_secret }}"
            x-text="selected === 'opt1' ? 'Sign up for free' : (selected === 'opt2' ? 'Sign up monthly for $10' : (selected === 'opt3' ? 'Sign up yearly for $$95' : 'Sign up for free'))"
            class="py-2 px-4 bg-green-500 hover:bg-green-600 text-green-100 rounded-lg"
        >
            Sign up for free
        </button>
    </div>
</form>

Related Examples

Credit / Debit card payment information form

Author:
Santos78

2 years ago

19.8k
Order Sumamary
Shows the summary of the order a user has placed, may include shipping address, total amount, payment method, and status.

Author:
Code huit

2 years ago

13.9k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

9 months ago

944
Sign up form
simple full-height register form

Author:
Lukas Müller

2 years ago

12.9k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

2 years ago

19.2k
Contact Form Component with Responsive Design and Decorative Elements
A modern contact form component featuring a split layout with form fields and contact information. Includes name, email, and message inputs with icon integration, decorative SVG elements, and responsive design for all screen sizes. Built with clean HTML and Tailwind CSS styling for seamless integration into any website.

Author:
Homayoun

3 months ago

639
Reservation form with fabform.io

Author:
Ho O

1 year ago

1.4k
Tag input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.9k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

15.8k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

2 years ago

6.2k
Records Form - HPower
records survey form

Author:
Anonymous

1 year ago

1.2k
Large File upload input

Author:
Akshay

3 years ago

14.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components