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

10k

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.7k
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.6k
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

7 months ago

923
Contact me form
contact me form

Author:
Geoffrey Callaghan

2 years ago

7.3k
Register form

Author:
Maxim

10 months ago

1.3k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

1 year ago

2.9k
Contact Form for fabform.io
Contact form that uses fabform.io

Author:
Ho O

10 months ago

695
Form Layouts

Author:
Anonymous

1 year ago

3k
Register Form
A simple and minimalistic register form.

Author:
Sonam Sherpa

2 months ago

242
Responsive contact us section

Author:
Ron Hicks

2 years ago

14.7k
Contact Form

Author:
Sophia Baker

2 years ago

10.3k
Login Form

Author:
UI-Templates

1 month ago

154

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components