Car booking form

Rental carr booking form to rent a car online

This tailwind example is contributed by ehmasuk, on 28-Oct-2025. Component is made with Tailwind v3.4. It is responsive.

Form Other

Author ehmasuk

Tailwind v3.4 865 1

Fork Fullscreen

<div class="max-w-4xl mx-auto py-10">
      <div class="bg-white rounded-lg border-2 border-orange-400 p-6 md:p-8 lg:p-10 shadow-lg">
        <div class="space-y-6">
          
          <div class="text-center">
            <h1 class="text-2xl md:text-3xl font-semibold text-orange-500">Instant Quote or Book Online</h1>
          </div>

<div class="space-y-3">
            <label class="text-gray-700 font-medium block">Pick Up Location:</label>
            <input
              type="text"
              placeholder="Enter Address, Point of Interest, or Airport Code"
              class="bg-gray-50 border border-gray-300 text-gray-900 h-12 w-full rounded-md px-4 placeholder:text-gray-400 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 focus:outline-none transition-colors"
            />
          </div>

<div class="text-center">
            <button class="text-orange-500 hover:text-orange-600 font-medium flex items-center justify-center mx-auto transition-colors">
              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
              Add Stop
            </button>
          </div>

<div class="space-y-3">
            <label class="text-gray-700 font-medium block">Drop Off Location:</label>
            <input
              type="text"
              placeholder="Enter Address, Point of Interest, or Airport Code"
              class="bg-gray-50 border border-gray-300 text-gray-900 h-12 w-full rounded-md px-4 placeholder:text-gray-400 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 focus:outline-none transition-colors"
            />
          </div>

<div class="grid md:grid-cols-2 gap-6">
            <div class="space-y-3">
              <label class="text-gray-700 font-medium block">Date of Service:</label>
              <input
                type="date"
                placeholder="Pick Up Date"
                class="bg-gray-50 border border-gray-300 text-gray-900 h-12 w-full rounded-md px-4 placeholder:text-gray-400 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 focus:outline-none transition-colors cursor-pointer"
              />
            </div>

<div class="space-y-3">
              <label class="text-gray-700 font-medium block">Pick Up Time:</label>
              <select class="bg-gray-50 border border-gray-300 text-gray-700 h-12 w-full rounded-md px-4 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 focus:outline-none appearance-none transition-colors">
                <option value="">- Please Select -</option>
                <option value="00:00">12:00 AM</option>
                <option value="00:30">12:30 AM</option>
                <option value="01:00">1:00 AM</option>
                <option value="01:30">1:30 AM</option>
                <option value="02:00">2:00 AM</option>
                <option value="02:30">2:30 AM</option>
              </select>
            </div>
          </div>

<div class="grid md:grid-cols-2 gap-6">
            <div class="space-y-3">
              <label class="text-gray-700 font-medium block">Type of Service:</label>
              <select class="bg-gray-50 border border-gray-300 text-gray-700 h-12 w-full rounded-md px-4 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 focus:outline-none appearance-none transition-colors">
                <option value="">- Please Select -</option>
                <option value="point-to-point">Point to Point</option>
                <option value="hourly">Hourly Service</option>
                <option value="airport-transfer">Airport Transfer</option>
                <option value="wedding">Wedding Service</option>
                <option value="corporate">Corporate Service</option>
              </select>
            </div>

<div class="space-y-3">
              <label class="text-gray-700 font-medium block">Passengers:</label>
              <select class="bg-gray-50 border border-gray-300 text-gray-700 h-12 w-full rounded-md px-4 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 focus:outline-none appearance-none transition-colors">
                <option value="">- Please Choose -</option>
                <option value="1">1 Passenger</option>
                <option value="2">2 Passengers</option>
                <option value="3">3 Passengers</option>
                <option value="4">4 Passengers</option>
                <option value="5">5 Passengers</option>
                <option value="6">6 Passengers</option>
                <option value="7">7 Passengers</option>
                <option value="8">8 Passengers</option>
                <option value="9">9+ Passengers</option>
              </select>
            </div>
          </div>

<div class="border-t border-gray-200 pt-6 space-y-6">
            <h3 class="text-lg font-semibold text-gray-800">Contact Information</h3>

<div class="space-y-3">
                <label class="text-gray-700 font-medium block">Phone Number:</label>
                <input
                  type="tel"
                  placeholder="Enter phone number"
                  class="bg-gray-50 border border-gray-300 text-gray-900 h-12 w-full rounded-md px-4 placeholder:text-gray-400 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 focus:outline-none transition-colors"
                />
              </div>
            </div>

<div class="space-y-3">
              <label class="text-gray-700 font-medium block">Email Address:</label>
              <input
                type="email"
                placeholder="Enter email address"
                class="bg-gray-50 border border-gray-300 text-gray-900 h-12 w-full rounded-md px-4 placeholder:text-gray-400 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 focus:outline-none transition-colors"
              />
            </div>
          </div>

<div class="border-t border-gray-200 pt-6 space-y-6">
            <h3 class="text-lg font-semibold text-gray-800">Flight Information (Optional)</h3>

<div class="grid md:grid-cols-2 gap-6">
              <div class="space-y-3">
                <label class="text-gray-700 font-medium block">Flight Number:</label>
                <input
                  type="text"
                  placeholder="e.g. EK202"
                  class="bg-gray-50 border border-gray-300 text-gray-900 h-12 w-full rounded-md px-4 placeholder:text-gray-400 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 focus:outline-none transition-colors"
                />
              </div>

<div class="space-y-3">
                <label class="text-gray-700 font-medium block">Arrival Time:</label>
                <input
                  type="time"
                  placeholder="Select arrival time"
                  class="bg-gray-50 border border-gray-300 text-gray-900 h-12 w-full rounded-md px-4 placeholder:text-gray-400 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 focus:outline-none transition-colors cursor-pointer"
                />
              </div>
            </div>
          </div>

<div class="pt-6">
            <button class="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold h-14 text-lg rounded-md transition-colors duration-200 shadow-md hover:shadow-lg">
              Get Quote & Book Now
            </button>
          </div>
        </div>
      </div>
    </div>

Related Examples

Glassmorphism form

Sophia Baker

3 years ago

19.3k
Glassmorphism form

Geoffrey Callaghan

2 years ago

7.5k
authentication form terminal
authentication form with zsh on mac terminal looks

ardianhu

2 years ago

3.5k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.1k
Age verification 18+

Maxim

1 year ago

1.6k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Abdul Baset Bappy

1 year ago

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

Hamza Atig

1 year ago

1.6k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

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

Hamza Atig

1 year ago

1.8k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Hamza Atig

1 year ago

1.7k
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k