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

<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

Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

9 months ago

1.1k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

3 years ago

15k
Contact Form Component with Responsive Design and Decorative Elements
A modern contact form component featuring a split layout with form fields and contact information. Includes name, email, and message inputs with icon integration, decorative SVG elements, and responsive design for all screen sizes. Built with clean HTML and Tailwind CSS styling for seamless integration into any website.

Author:
Homayoun

3 months ago

716
Confirm OTP Form
can be used as a reset password form

Author:
Santos78

2 years ago

10.9k
Responsive Bank Card Information Form with TailwindCSS
A sleek and modern bank card information form built with raw HTML and styled using TailwindCSS. This responsive form includes fields for cardholder name, card number, expiry date, and CVV, designed for clean aesthetics and ease of use.

Author:
SHARIFUL ISLAM

11 months ago

1.7k
Extreme Signup Page
I create a signup page using html, tailwindcss and font awesome icons using cdn.

Author:
Akram Khan

1 year ago

3k
Reservation form

Author:
Lukas Müller

3 years ago

13.8k
Simple Sign-up Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

2 years ago

10.7k
Appointment booking form

Author:
Ho O

1 year ago

1.1k
Sign up form

Author:
Rajesh Maheshwari

11 months ago

976
Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

1 year ago

2.7k
Instagram Login Clone
login form and signup

Author:
gidy

8 months ago

509

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components