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

9.7k

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

1 year ago

12.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

2 months ago

443
Feedback form with fabform.io
Collect opinions about your company's service

Author:
Ho O

5 months ago

552
Contact us section
Minimal contact us form

Author:
Leon Bachmann

2 years ago

11.4k
form3

Author:
ABDO-SY

3 months ago

428
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
Anonymous

3 months ago

164
Checkout form

Author:
Sienna

2 years ago

13.4k
contact us form
contact us form that uses the Free VeilMail EmailProtection Service too!

Author:
Geoffrey Callaghan

1 year ago

5.8k
free tailwind personal portfolio template
free tailwind personal portfolio template

Author:
Geoffrey Callaghan

1 year ago

4.5k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

3 months ago

662
Tailwind CSS Radio Button Cards

Author:
Prashant

2 years ago

11.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components