prebuiltui

Form

Buttons 16

About

Here is Form component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Form to your project and fits it to your theme.

Code

How Form is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react";

export default function Example() {
    return (
        <form className="flex flex-col items-center text-sm">
            <p className="text-lg text-blue-600 font-medium pb-2">Contact Us</p>
            <h1 className="text-4xl font-semibold text-slate-700 pb-4">Get in touch with us</h1>
            <p className="text-sm text-gray-500 text-center pb-10">Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br />Lorem Ipsum has been the industry's standard dummy text.</p>
            
            <div className="flex flex-col md:flex-row items-center gap-8 w-[350px] md:w-[700px]">
                <div className="w-full">
                    <label className="text-black/70" htmlFor="name">Your Name</label>
                    <input className="h-12 p-2 mt-2 w-full border border-gray-500/30 rounded outline-none focus:border-indigo-300" type="text" required />
                </div>
                <div className="w-full">
                    <label className="text-black/70" htmlFor="name">Your Email</label>
                    <input className="h-12 p-2 mt-2 w-full border border-gray-500/30 rounded outline-none focus:border-indigo-300" type="email" required />
                </div>
            </div>
        
            <div className="mt-6 w-[350px] md:w-[700px]">
                <label className="text-black/70" htmlFor="name">Message</label>
                <textarea className="w-full mt-2 p-2 h-40 border border-gray-500/30 rounded resize-none outline-none focus:border-indigo-300" required></textarea>
            </div>
        
            <button type="submit" className="mt-5 bg-indigo-600 text-white h-12 w-56 px-4 rounded active:scale-95 transition">Send Message</button>
        </form>
    );
};

More by prebuiltui

View all
  • Image Gallery

    Image Gallery

    1.3K
  • Hero Section

    Hero Section

    416
  • Feature Sections

    Feature Sections

    352
  • Testimonial

    Testimonial

    309
  • Cards

    Cards

    233
  • FAQ Sections

    FAQ Sections

    180
  • Login Form

    Login Form

    128
  • Pricing Cards

    Pricing Cards

    89

More in Buttons

View all
  • Button Group

    Button Group

    2
  • App Store Button

    App Store Button

    458
  • Eclipse Button

    Eclipse Button

    6
  • Texture Button

    Texture Button

    96
  • Button

    Button

    5
  • Button Save

    Button Save

    47
  • Base Button

    Base Button

    3
  • HeroUI Button Group

    HeroUI Button Group