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

1.7k

<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

Advanced phone verification

Author:
Md. Tofayel islam

2 years ago

2.3k
Text Rpg UI

Author:
Crimson

1 year ago

1.4k
Simple contact us form

Author:
Geoffrey Callaghan

2 years ago

7.6k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

8 months ago

1.1k
Login form

Author:
Rajesh Maheshwari

1 year ago

1.8k
tailwind contact form template
tailwind contact form template

Author:
Ti To

2 years ago

5.8k
Book appointment form

Author:
Lukas Müller

3 years ago

28.5k
3D Login form
Made a responsive and the 3d animative

Author:
Sufyan jutt

1 month ago

53
Contact Us form

Author:
ABDO-SY

11 months ago

1.1k
Apply Coupon Code form

Author:
Lyra Ravensong

2 years ago

8.8k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

10 months ago

861
form text

Author:
Severino Victtorino

11 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components