Payment form (Alpine JS)

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

Tailwind v3.4 10.7k 13

<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

Santos78

3 years ago

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

Code huit

3 years ago

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

Hamza Atig

1 year ago

1.8k
Search form section with a background SVG gradient

TailwindFlex

3 years ago

15.2k
contact form
contact form

Geoffrey Callaghan

3 years ago

7.9k
authentication form terminal
authentication form with zsh on mac terminal looks

ardianhu

2 years ago

3.6k
Book appointment form

Lukas Müller

3 years ago

29.7k
Simple login form

Freja Jensen

3 years ago

11.7k
Comment form

Sophia Baker

3 years ago

13.1k
Login Template
its is a basic login template

Sergio Gonzalez

1 year ago

1.2k
Login form

Leon Bachmann

3 years ago

16k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.9k