Home
Ho O
Reservation form with fabform.io

Reservation form with fabform.io

Forked from> @lukas-muller/reservation-form

This tailwind example is contributed by Ho O, on 09-Jan-2025. Component is made with Tailwind CSS v3. It is responsive.

Form

Author Ho O

<div class="-mx-3 flex flex-wrap">
                <div class="w-full px-3 sm:w-1/2">
                    <div class="mb-5">
                        <label for="fName" class="mb-3 block text-base font-medium text-[#07074D]">
                            First Name
                        </label>
                        <input type="text" name="fName" id="fName" placeholder="First Name"
                            class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md" />
                    </div>
                </div>
                <div class="w-full px-3 sm:w-1/2">
                    <div class="mb-5">
                        <label for="lName" class="mb-3 block text-base font-medium text-[#07074D]">
                            Last Name
                        </label>
                        <input type="text" name="lName" id="lName" placeholder="Last Name"
                            class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md" />
                    </div>
                </div>
            </div>
            <div class="mb-5">
                <label for="guest" class="mb-3 block text-base font-medium text-[#07074D]">
                    How many guest are you bringing?
                </label>
                <input type="number" name="guest" id="guest" placeholder="5" min="0"
                    class="w-full appearance-none rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md" />
            </div>

<div class="mb-5">
                <label class="mb-3 block text-base font-medium text-[#07074D]">
                    Are you coming to the event?
                </label>
                <div class="flex items-center space-x-6">
                    <div class="flex items-center">
                        <input type="radio" name="radio1" id="radioButton1" class="h-5 w-5" />
                        <label for="radioButton1" class="pl-3 text-base font-medium text-[#07074D]">
                            Yes
                        </label>
                    </div>
                    <div class="flex items-center">
                        <input type="radio" name="radio1" id="radioButton2" class="h-5 w-5" />
                        <label for="radioButton2" class="pl-3 text-base font-medium text-[#07074D]">
                            No
                        </label>
                    </div>
                </div>
            </div>

<div>
                <button
                    class="hover:shadow-form rounded-md bg-[#6A64F1] py-3 px-8 text-center text-base font-semibold text-white outline-none">
                    Submit
                </button>
            </div>
        </form>
    </div>
</div>

Related Examples

Confirm OTP Form
can be used as a reset password form

Author:
Santos78

1 year ago

9.7k
Sign up form
simple full-height register form

Author:
Lukas Müller

1 year ago

11k
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Author:
Fathallah Anass

6 months ago

1.1k
Simple contact us form

Author:
Lukas Müller

1 year ago

10.4k
Verify otp form

Author:
Jakub Novak

1 year ago

16.3k
Login template

Author:
Gabriel Urbano

1 year ago

4.6k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Author:
Samuel Abera

9 months ago

7.1k
login page

Author:
Abid Ullah

4 months ago

874
Form
form

Author:
Aman kumar

6 months ago

948
Credit / Debit card payment information form

Author:
Santos78

1 year ago

18.5k
Feedback Form with rating input
take users feedback with this simple form

Author:
Nour Haider

1 year ago

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

3 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components