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

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

20k
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

14.2k
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

10 months ago

972
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

8 months ago

1.3k
Checkout form
A versatile checkout form component for users to provide shipping and payment information. It has fields for first name, last name, address, city, state, ZIP code, card number, expiration date, and CVV.

Author:
Anonymous

2 years ago

13.1k
Simple Form

Author:
Mr Robot

3 years ago

10.1k
Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

12.7k
Product cards
Product cards for eCommerce

Author:
ehmasuk

4 months ago

480
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 year ago

1.7k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.7k
Feedback form
Collect opinions about your company's service

Author:
Arya

3 years ago

14.4k
Feedback Form
Feedback Form with a map

Author:
Andreas Wagner

2 years ago

8.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components