Tailwind CSS Booking and Reservation Sections

These booking and reservation components leverage the utility-first approach of Tailwind CSS to create sleek, responsive interfaces for managing appointments, reservations, and scheduling needs.

Each section is built with flexibility in mind, allowing for quick implementation across various booking scenarios like hotel stays, restaurant tables, event tickets, or service appointments.

Appointment Booking Form

Book Your Appointment

Full Name

Email Address

Phone Number

Service Type

Preferred Date

Preferred Time

Additional Notes (Optional)

<div class="max-w-xl mx-auto p-6 bg-white rounded-lg shadow-md">
   <h3 class="text-lg font-medium text-gray-900 mb-6">Book Your Appointment</h3>
   <form action="#" method="POST" class="space-y-4">
       <div>
           <label for="appointment-name" class="block text-sm font-medium text-gray-700">Full Name</label>
           <input type="text" name="appointment-name" id="appointment-name" autocomplete="name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="John Doe">
       </div>
       <div>
           <label for="appointment-email" class="block text-sm font-medium text-gray-700">Email Address</label>
           <input type="email" name="appointment-email" id="appointment-email" autocomplete="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="you@example.com">
       </div>
       <div>
           <label for="appointment-phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
           <input type="tel" name="appointment-phone" id="appointment-phone" autocomplete="tel" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="(123) 456-7890">
       </div>
       <div>
            <label for="appointment-service" class="block text-sm font-medium text-gray-700">Service Type</label>
            <select id="appointment-service" name="appointment-service" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                <option>Consultation</option>
                <option>Check-up</option>
                <option>Follow-up</option>
                <option>Other</option>
            </select>
        </div>
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div>
               <label for="appointment-date" class="block text-sm font-medium text-gray-700">Preferred Date</label>
               <input type="date" name="appointment-date" id="appointment-date" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
           </div>
           <div>
               <label for="appointment-time" class="block text-sm font-medium text-gray-700">Preferred Time</label>
               <input type="time" name="appointment-time" id="appointment-time" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
           </div>
       </div>
       <div>
           <label for="appointment-notes" class="block text-sm font-medium text-gray-700">Additional Notes (Optional)</label>
           <textarea id="appointment-notes" name="appointment-notes" rows="3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Any specific requests or information?"></textarea>
       </div>
       <div>
           <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
               Request Appointment
           </button>
       </div>
   </form>
</div>

Hotel Room Reservation Form

Find Your Perfect Stay

Destination or Hotel Name

Check-in Date

Check-out Date

Adults

Children

Rooms

Room Type (Optional)

<div class="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-md">
    <h3 class="text-lg font-medium text-gray-900 mb-6">Find Your Perfect Stay</h3>
    <form action="#" method="POST" class="space-y-4">
        <div>
            <label for="hotel-destination" class="block text-sm font-medium text-gray-700">Destination or Hotel Name</label>
            <input type="text" name="hotel-destination" id="hotel-destination" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="e.g., Paris, Grand Hyatt">
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label for="hotel-checkin" class="block text-sm font-medium text-gray-700">Check-in Date</label>
                <input type="date" name="hotel-checkin" id="hotel-checkin" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
            </div>
            <div>
                <label for="hotel-checkout" class="block text-sm font-medium text-gray-700">Check-out Date</label>
                <input type="date" name="hotel-checkout" id="hotel-checkout" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
            </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
                <label for="hotel-adults" class="block text-sm font-medium text-gray-700">Adults</label>
                <select id="hotel-adults" name="hotel-adults" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    <option>1</option>
                    <option selected>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5+</option>
                </select>
            </div>
            <div>
                <label for="hotel-children" class="block text-sm font-medium text-gray-700">Children</label>
                <select id="hotel-children" name="hotel-children" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    <option selected>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4+</option>
                </select>
            </div>
             <div>
                <label for="hotel-rooms" class="block text-sm font-medium text-gray-700">Rooms</label>
                <select id="hotel-rooms" name="hotel-rooms" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    <option selected>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4+</option>
                </select>
            </div>
        </div>
        <div>
            <label for="hotel-room-type" class="block text-sm font-medium text-gray-700">Room Type (Optional)</label>
            <select id="hotel-room-type" name="hotel-room-type" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                <option>Any</option>
                <option>Standard</option>
                <option>Deluxe</option>
                <option>Suite</option>
                <option>Family Room</option>
            </select>
        </div>
        <div>
            <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Search Hotels
            </button>
        </div>
    </form>
    <!-- Example Image -->
    <div class="mt-6">
        <img src="https://picsum.photos/600/200?random=1" alt="Hotel scenic view" class="w-full h-32 object-cover rounded-md">
    </div>
</div>

Table Reservation Form (Restaurant)

Reserve Your Table

Full Name

Phone Number

Email Address (Optional)

Date

Time

Guests

Special Requests (Optional)

<div class="max-w-lg mx-auto p-6 bg-white rounded-lg shadow-md">
   <h3 class="text-lg font-medium text-gray-900 mb-6 text-center">Reserve Your Table</h3>
   <form action="#" method="POST" class="space-y-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div>
               <label for="table-name" class="block text-sm font-medium text-gray-700">Full Name</label>
               <input type="text" name="table-name" id="table-name" autocomplete="name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Jane Smith">
           </div>
            <div>
               <label for="table-phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
               <input type="tel" name="table-phone" id="table-phone" autocomplete="tel" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="(555) 123-4567">
           </div>
        </div>
       <div>
           <label for="table-email" class="block text-sm font-medium text-gray-700">Email Address (Optional)</label>
           <input type="email" name="table-email" id="table-email" autocomplete="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="you@example.com">
       </div>
       <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
           <div>
               <label for="table-date" class="block text-sm font-medium text-gray-700">Date</label>
               <input type="date" name="table-date" id="table-date" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
           </div>
           <div>
               <label for="table-time" class="block text-sm font-medium text-gray-700">Time</label>
               <input type="time" name="table-time" id="table-time" step="900" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> <!-- step="900" for 15-min intervals -->
           </div>
            <div>
                <label for="table-guests" class="block text-sm font-medium text-gray-700">Guests</label>
                <select id="table-guests" name="table-guests" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    <option>1 person</option>
                    <option selected>2 people</option>
                    <option>3 people</option>
                    <option>4 people</option>
                    <option>5 people</option>
                    <option>6 people</option>
                    <option>7 people</option>
                    <option>8+ people</option>
                </select>
            </div>
       </div>
       <div>
           <label for="table-requests" class="block text-sm font-medium text-gray-700">Special Requests (Optional)</label>
           <textarea id="table-requests" name="table-requests" rows="2" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="e.g., Window seat, high chair needed"></textarea>
       </div>
       <div>
           <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
               Book Table
           </button>
       </div>
   </form>
    <!-- Example Image -->
    <div class="mt-6">
        <img src="https://picsum.photos/500/150?random=2" alt="Restaurant ambiance" class="w-full h-28 object-cover rounded-md">
    </div>
</div>

Event Registration Form

Annual Tech Conference 2024

October 25-27, 2024 | Virtual Event

First Name

Last Name

Email Address

Number of Tickets

Ticket Type

General Admission ($99)

VIP Access ($249)

Dietary Restrictions (Optional)

<div class="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-md">
    <div class="text-center mb-6">
        <img src="https://picsum.photos/150/150?random=3" alt="Event Logo" class="w-24 h-24 mx-auto rounded-full mb-2 object-cover">
        <h3 class="text-xl font-semibold text-gray-900">Annual Tech Conference 2024</h3>
        <p class="text-sm text-gray-500">October 25-27, 2024 | Virtual Event</p>
    </div>

   <form action="#" method="POST" class="space-y-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div>
               <label for="event-fname" class="block text-sm font-medium text-gray-700">First Name</label>
               <input type="text" name="event-fname" id="event-fname" autocomplete="given-name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Alex">
           </div>
            <div>
               <label for="event-lname" class="block text-sm font-medium text-gray-700">Last Name</label>
               <input type="text" name="event-lname" id="event-lname" autocomplete="family-name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Johnson">
           </div>
        </div>
       <div>
           <label for="event-email" class="block text-sm font-medium text-gray-700">Email Address</label>
           <input type="email" name="event-email" id="event-email" autocomplete="email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="alex.j@example.com">
       </div>
       <div>
            <label for="event-tickets" class="block text-sm font-medium text-gray-700">Number of Tickets</label>
            <select id="event-tickets" name="event-tickets" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                <option selected>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5+</option>
            </select>
        </div>
        <fieldset>
          <legend class="text-sm font-medium text-gray-700">Ticket Type</legend>
          <div class="mt-2 space-y-2 sm:space-y-0 sm:flex sm:space-x-10">
            <div class="flex items-center">
              <input id="ticket-general" name="ticket-type" type="radio" checked class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
              <label for="ticket-general" class="ml-3 block text-sm font-medium text-gray-700">General Admission ($99)</label>
            </div>
            <div class="flex items-center">
              <input id="ticket-vip" name="ticket-type" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
              <label for="ticket-vip" class="ml-3 block text-sm font-medium text-gray-700">VIP Access ($249)</label>
            </div>
          </div>
        </fieldset>

       <div>
           <label for="event-dietary" class="block text-sm font-medium text-gray-700">Dietary Restrictions (Optional)</label>
           <input type="text" name="event-dietary" id="event-dietary" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="e.g., Vegetarian, Gluten-Free">
       </div>
       <div>
           <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
               Register Now
           </button>
       </div>
   </form>
</div>

Ticket Booking Form (Concert/Movie)

Movie Title: Galactic Adventures

Genre: Sci-Fi | Rating: PG-13

Select date, time, and number of tickets.

Select Date

Select Time

Number of Tickets

Ticket Type

Seat Preference (Optional)

<div class="max-w-lg mx-auto p-6 bg-white rounded-lg shadow-md">
   <div class="flex items-center space-x-4 mb-6">
       <img src="https://picsum.photos/80/120?random=4" alt="Movie Poster" class="w-20 h-30 object-cover rounded flex-shrink-0">
       <div>
           <h3 class="text-lg font-medium text-gray-900">Movie Title: Galactic Adventures</h3>
           <p class="text-sm text-gray-600">Genre: Sci-Fi | Rating: PG-13</p>
           <p class="text-sm text-gray-500">Select date, time, and number of tickets.</p>
       </div>
   </div>
   <form action="#" method="POST" class="space-y-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div>
               <label for="ticket-date" class="block text-sm font-medium text-gray-700">Select Date</label>
               <input type="date" name="ticket-date" id="ticket-date" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
           </div>
            <div>
               <label for="ticket-time" class="block text-sm font-medium text-gray-700">Select Time</label>
                <select id="ticket-time" name="ticket-time" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
                    <option>2:00 PM</option>
                    <option>4:30 PM</option>
                    <option selected>7:00 PM</option>
                    <option>9:30 PM</option>
                </select>
           </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label for="ticket-quantity" class="block text-sm font-medium text-gray-700">Number of Tickets</label>
                <input type="number" name="ticket-quantity" id="ticket-quantity" min="1" max="10" value="2" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
            </div>
            <div>
                <label for="ticket-type" class="block text-sm font-medium text-gray-700">Ticket Type</label>
                <select id="ticket-type" name="ticket-type" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
                    <option selected>Adult ($12.00)</option>
                    <option>Child ($8.00)</option>
                    <option>Senior ($9.00)</option>
                </select>
            </div>
        </div>

       <div>
           <label for="ticket-seat" class="block text-sm font-medium text-gray-700">Seat Preference (Optional)</label>
           <input type="text" name="ticket-seat" id="ticket-seat" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" placeholder="e.g., Middle row, Aisle seat">
       </div>
       <div>
           <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
               Buy Tickets
           </button>
       </div>
   </form>
</div>

Service Scheduling Form (Salon/Clinic)

Schedule Your Service

Book your haircut, massage, or consultation.

Select Service

Preferred Staff (Optional)

Select Date

Select Time

Your Name

Email Address

Phone Number

<div class="max-w-xl mx-auto p-6 bg-white rounded-lg shadow-md">
    <div class="flex items-center space-x-4 mb-6">
       <img src="https://picsum.photos/100/100?random=5" alt="Service provider logo" class="w-16 h-16 rounded-full object-cover flex-shrink-0">
       <div>
           <h3 class="text-lg font-medium text-gray-900">Schedule Your Service</h3>
           <p class="text-sm text-gray-500">Book your haircut, massage, or consultation.</p>
       </div>
   </div>
   <form action="#" method="POST" class="space-y-4">
       <div>
            <label for="service-type" class="block text-sm font-medium text-gray-700">Select Service</label>
            <select id="service-type" name="service-type" required class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm">
                <option value="" disabled selected>-- Choose a service --</option>
                <option>Haircut & Style</option>
                <option>Manicure / Pedicure</option>
                <option>Massage Therapy</option>
                <option>Medical Consultation</option>
                <option>Dental Cleaning</option>
                <option>Other</option>
            </select>
        </div>
       <div>
            <label for="service-staff" class="block text-sm font-medium text-gray-700">Preferred Staff (Optional)</label>
            <select id="service-staff" name="service-staff" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm">
                <option selected>Any Available</option>
                <option>Sarah Chen (Stylist)</option>
                <option>Mark Davis (Therapist)</option>
                <option>Dr. Emily White (MD)</option>
            </select>
        </div>
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div>
               <label for="service-date" class="block text-sm font-medium text-gray-700">Select Date</label>
               <input type="date" name="service-date" id="service-date" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm">
           </div>
           <div>
               <label for="service-time" class="block text-sm font-medium text-gray-700">Select Time</label>
               <input type="time" name="service-time" id="service-time" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm">
           </div>
       </div>
       <div>
           <label for="service-name" class="block text-sm font-medium text-gray-700">Your Name</label>
           <input type="text" name="service-name" id="service-name" autocomplete="name" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm" placeholder="Your Full Name">
       </div>
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
               <label for="service-email" class="block text-sm font-medium text-gray-700">Email Address</label>
               <input type="email" name="service-email" id="service-email" autocomplete="email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm" placeholder="you@example.com">
           </div>
           <div>
               <label for="service-phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
               <input type="tel" name="service-phone" id="service-phone" autocomplete="tel" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm" placeholder="(123) 456-7890">
           </div>
       </div>
       <div>
           <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
               Schedule Service
           </button>
       </div>
   </form>
</div>

Rent Equipment / Vehicle

Item Type

Pickup Location

Pickup Date & Time

Return Date & Time

Your Name

Phone

Optional Add-ons

Damage Insurance ($15/day)

GPS Navigation ($10/day)

Child Seat ($5/day)

HTML Code


<div class="bg-white p-6 rounded-lg border border-gray-200">
   <h2 class="text-xl font-semibold text-gray-800 mb-6">Rent Equipment / Vehicle</h2>
    <form action="#" method="POST">
         <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="md:col-span-1">
                 <img src="https://picsum.photos/300/400?random=2" alt="Rental Item" class="w-full h-auto object-cover rounded-md">
            </div>
             <div class="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div>
                    <label for="rental-item" class="block text-sm font-medium text-gray-700 mb-1">Item Type</label>
                    <select id="rental-item" name="rental-item" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                        <option>Select Item</option>
                        <option>Compact Car</option>
                        <option>SUV</option>
                        <option>Electric Drill</option>
                        <option>Projector</option>
                        <option>Folding Chairs (Set of 10)</option>
                    </select>
                </div>
                <div>
                    <label for="rental-pickup-location" class="block text-sm font-medium text-gray-700 mb-1">Pickup Location</label>
                    <select id="rental-pickup-location" name="rental-pickup-location" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                        <option>Downtown Branch</option>
                        <option>Airport Kiosk</option>
                        <option>Warehouse Unit 5</option>
                    </select>
                </div>
                <div>
                    <label for="rental-pickup-datetime" class="block text-sm font-medium text-gray-700 mb-1">Pickup Date & Time</label>
                    <input type="datetime-local" name="rental-pickup-datetime" id="rental-pickup-datetime" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                <div>
                    <label for="rental-return-datetime" class="block text-sm font-medium text-gray-700 mb-1">Return Date & Time</label>
                    <input type="datetime-local" name="rental-return-datetime" id="rental-return-datetime" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                <div class="sm:col-span-2">
                    <label for="rental-name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
                    <input type="text" name="rental-name" id="rental-name" placeholder="Jane Smith" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                <div>
                    <label for="rental-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" name="rental-email" id="rental-email" placeholder="jane@example.com" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                <div>
                    <label for="rental-phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                    <input type="tel" name="rental-phone" id="rental-phone" placeholder="+1 (555) 987-6543" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                </div>
                <div class="sm:col-span-2">
                    <fieldset>
                        <legend class="block text-sm font-medium text-gray-700 mb-1">Optional Add-ons</legend>
                        <div class="mt-2 space-y-2">
                            <div class="flex items-center">
                                <input id="rental-addon-insurance" name="rental-addons[]" type="checkbox" value="insurance" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <label for="rental-addon-insurance" class="ml-2 block text-sm text-gray-900">Damage Insurance ($15/day)</label>
                            </div>
                             <div class="flex items-center">
                                <input id="rental-addon-gps" name="rental-addons[]" type="checkbox" value="gps" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <label for="rental-addon-gps" class="ml-2 block text-sm text-gray-900">GPS Navigation ($10/day)</label>
                            </div>
                            <div class="flex items-center">
                                <input id="rental-addon-childseat" name="rental-addons[]" type="checkbox" value="childseat" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <label for="rental-addon-childseat" class="ml-2 block text-sm text-gray-900">Child Seat ($5/day)</label>
                            </div>
                        </div>
                    </fieldset>
                </div>
             </div>
        </div>
        <div class="mt-8 flex justify-end">
             <button type="button" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 mr-3">
                Cancel
            </button>
            <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                Request Rental
            </button>
        </div>
    </form>
</div>

Request a Doctor's Appointment

Department / Specialty

Preferred Doctor (Optional)

Preferred Date

Preferred Time Slot

Patient Full Name

Date of Birth

Contact Phone

Reason for Appointment

I am a new patient

HTML Code


<div class="bg-white p-6 rounded-lg border border-gray-200">
    <h2 class="text-xl font-semibold text-gray-800 mb-6">Request a Doctor's Appointment</h2>
     <form action="#" method="POST">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="doctor-department" class="block text-sm font-medium text-gray-700 mb-1">Department / Specialty</label>
                <select id="doctor-department" name="doctor-department" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                    <option>Select Department</option>
                    <option>General Practice</option>
                    <option>Cardiology</option>
                    <option>Dermatology</option>
                    <option>Pediatrics</option>
                    <option>Orthopedics</option>
                </select>
            </div>
            <div>
                <label for="doctor-name" class="block text-sm font-medium text-gray-700 mb-1">Preferred Doctor (Optional)</label>
                <select id="doctor-name" name="doctor-name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                    <option>Any Available Doctor</option>
                    <option>Dr. Alice Smith (Cardiology)</option>
                    <option>Dr. Bob Johnson (General Practice)</option>
                    <option>Dr. Carol Williams (Dermatology)</option>
                </select>
            </div>

             <div>
                <label for="doctor-date" class="block text-sm font-medium text-gray-700 mb-1">Preferred Date</label>
                <input type="date" name="doctor-date" id="doctor-date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
            </div>
             <div>
                <label for="doctor-time" class="block text-sm font-medium text-gray-700 mb-1">Preferred Time Slot</label>
                <select id="doctor-time" name="doctor-time" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                    <option>Any Time</option>
                    <option>Morning (9am - 12pm)</option>
                    <option>Afternoon (1pm - 5pm)</option>
                </select>
            </div>

            <div class="md:col-span-2">
                <label for="patient-name" class="block text-sm font-medium text-gray-700 mb-1">Patient Full Name</label>
                <input type="text" name="patient-name" id="patient-name" placeholder="Alex Thompson" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
            </div>

             <div>
                <label for="patient-dob" class="block text-sm font-medium text-gray-700 mb-1">Date of Birth</label>
                <input type="date" name="patient-dob" id="patient-dob" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
            </div>
            <div>
                <label for="patient-phone" class="block text-sm font-medium text-gray-700 mb-1">Contact Phone</label>
                <input type="tel" name="patient-phone" id="patient-phone" placeholder="+1 (555) 222-3333" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
            </div>

             <div class="md:col-span-2">
                <label for="appointment-reason" class="block text-sm font-medium text-gray-700 mb-1">Reason for Appointment</label>
                <textarea id="appointment-reason" name="appointment-reason" rows="3" placeholder="Briefly describe the reason for your visit (e.g., annual checkup, specific symptom)." class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"></textarea>
            </div>
            <div class="md:col-span-2">
                <div class="flex items-center">
                    <input id="new-patient" name="new-patient" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <label for="new-patient" class="ml-2 block text-sm text-gray-900">I am a new patient</label>
                </div>
            </div>

        </div>
         <div class="mt-8 flex justify-end">
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Request Appointment
            </button>
        </div>
    </form>
</div>

Register for a Class/Workshop

Select your desired class and provide your details below.

Class / Workshop

Select Date (if applicable)

Leave blank if the class has fixed dates.

Participant Name

Phone

Experience Level (Optional)

Comments / Questions

Total: $99.00

HTML Code


<div class="bg-white p-6 rounded-lg border border-gray-200">
    <div class="flex flex-col md:flex-row md:items-center md:gap-6 mb-6">
         <img src="https://picsum.photos/150/150?random=3" alt="Class/Workshop" class="w-32 h-32 object-cover rounded-md mb-4 md:mb-0 flex-shrink-0">
         <div>
            <h2 class="text-xl font-semibold text-gray-800">Register for a Class/Workshop</h2>
            <p class="text-gray-600 mt-1">Select your desired class and provide your details below.</p>
         </div>
    </div>
     <form action="#" method="POST">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="class-name" class="block text-sm font-medium text-gray-700 mb-1">Class / Workshop</label>
                <select id="class-name" name="class-name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    <option>Select a Class</option>
                    <option>Introduction to Pottery (Tuesdays 6pm)</option>
                    <option>Advanced Web Development (Saturdays 10am)</option>
                    <option>Yoga for Beginners (Mondays 7pm)</option>
                    <option>Public Speaking Masterclass (Weekend Intensive)</option>
                </select>
            </div>
             <div>
                <label for="class-date" class="block text-sm font-medium text-gray-700 mb-1">Select Date (if applicable)</label>
                <input type="date" name="class-date" id="class-date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                <p class="mt-1 text-xs text-gray-500">Leave blank if the class has fixed dates.</p>
            </div>
            <div class="md:col-span-2">
                <label for="participant-name" class="block text-sm font-medium text-gray-700 mb-1">Participant Name</label>
                <input type="text" name="participant-name" id="participant-name" placeholder="Sam Jones" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
            </div>
            <div>
                <label for="participant-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                <input type="email" name="participant-email" id="participant-email" placeholder="sam@example.com" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
            </div>
             <div>
                <label for="participant-phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                <input type="tel" name="participant-phone" id="participant-phone" placeholder="+1 (555) 444-5555" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
            </div>
            <div class="md:col-span-2">
                <label for="participant-experience" class="block text-sm font-medium text-gray-700 mb-1">Experience Level (Optional)</label>
                <select id="participant-experience" name="participant-experience" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    <option>Select Level</option>
                    <option>Beginner</option>
                    <option>Intermediate</option>
                    <option>Advanced</option>
                    <option>Not Applicable</option>
                </select>
            </div>
            <div class="md:col-span-2">
                <label for="class-comments" class="block text-sm font-medium text-gray-700 mb-1">Comments / Questions</label>
                <textarea id="class-comments" name="class-comments" rows="3" placeholder="Any specific requirements or questions?" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea>
            </div>
        </div>
         <div class="mt-8 border-t pt-6 flex items-center justify-between">
             <p class="text-lg font-semibold text-gray-700">Total: <span id="class-price">$99.00</span></p>
            <button type="submit" class="bg-indigo-600 text-white px-5 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Register Now
            </button>
        </div>
    </form>
</div>

Book a Gym Session / Personal Training

Session Type

Gym Access Personal Training Group Class

Select Trainer (if PT)

Select Class (if Group)

Date

Time Slot

Member Name

Member ID (Optional)

Notes for Trainer/Session

HTML Code


<div class="bg-white p-6 rounded-lg border border-gray-200">
     <h2 class="text-xl font-semibold text-gray-800 mb-6">Book a Gym Session / Personal Training</h2>
    <form action="#" method="POST">
         <div class="space-y-6">
             <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Session Type</label>
                <div class="mt-2 grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <!-- Add 'bg-blue-50 border-blue-300 text-blue-900' for selected state -->
                    <label class="border border-gray-300 rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 cursor-pointer">
                        <input type="radio" name="gym-session-type" value="gym-access" class="sr-only" aria-labelledby="gym-session-type-0-label">
                        <span id="gym-session-type-0-label">Gym Access</span>
                    </label>
                    <label class="border border-gray-300 rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 cursor-pointer bg-blue-50 border-blue-300 text-blue-900">
                        <input type="radio" name="gym-session-type" value="personal-training" class="sr-only" checked aria-labelledby="gym-session-type-1-label">
                        <span id="gym-session-type-1-label">Personal Training</span>
                    </label>
                     <label class="border border-gray-300 rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 cursor-pointer">
                        <input type="radio" name="gym-session-type" value="group-class" class="sr-only" aria-labelledby="gym-session-type-2-label">
                        <span id="gym-session-type-2-label">Group Class</span>
                    </label>
                </div>
             </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <!-- Enable/disable based on Session Type selection -->
                    <label for="gym-trainer" class="block text-sm font-medium text-gray-700 mb-1">Select Trainer (if PT)</label>
                    <select id="gym-trainer" name="gym-trainer" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm">
                        <option>Select Trainer</option>
                        <option>Sarah Chen</option>
                        <option>Mike Davis</option>
                        <option>Chloe Green</option>
                        <option>Not Applicable</option>
                    </select>
                </div>
                 <div>
                    <!-- Enable/disable based on Session Type selection -->
                    <label for="gym-class" class="block text-sm font-medium text-gray-700 mb-1">Select Class (if Group)</label>
                    <select id="gym-class" name="gym-class" disabled class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm bg-gray-50 text-gray-500">
                        <option>Select Class</option>
                        <option>Spinning (Mon 6pm)</option>
                        <option>HIIT (Wed 7am)</option>
                        <option>Zumba (Fri 5pm)</option>
                    </select>
                </div>
                <div>
                    <label for="gym-date" class="block text-sm font-medium text-gray-700 mb-1">Date</label>
                    <input type="date" name="gym-date" id="gym-date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm">
                </div>
                <div>
                    <label for="gym-time" class="block text-sm font-medium text-gray-700 mb-1">Time Slot</label>
                    <select id="gym-time" name="gym-time" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm">
                        <option>Select Time</option>
                        <option>07:00 AM</option>
                        <option>08:00 AM</option>
                        <option>09:00 AM</option>
                        <option>...</option>
                        <option>05:00 PM</option>
                        <option>06:00 PM</option>
                        <option>07:00 PM</option>
                    </select>
                </div>
                <div>
                    <label for="gym-member-name" class="block text-sm font-medium text-gray-700 mb-1">Member Name</label>
                    <input type="text" name="gym-member-name" id="gym-member-name" placeholder="Chris Lee" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm">
                </div>
                 <div>
                    <label for="gym-member-id" class="block text-sm font-medium text-gray-700 mb-1">Member ID (Optional)</label>
                    <input type="text" name="gym-member-id" id="gym-member-id" placeholder="CL12345" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm">
                </div>
             </div>
             <div>
                 <label for="gym-notes" class="block text-sm font-medium text-gray-700 mb-1">Notes for Trainer/Session</label>
                 <textarea id="gym-notes" name="gym-notes" rows="3" placeholder="Any specific goals, injuries, or requests for this session?" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm"></textarea>
            </div>
         </div>
         <div class="mt-8 flex justify-end">
            <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                Book Session
            </button>
        </div>
    </form>
 </div>

Reserve a Meeting Room / Coworking Space

Find and book the perfect space for your needs.

Space Type

Number of Attendees

Date

Start Time

End Time

Booker Name / Company

Contact Email

Equipment Needed

Projector

Whiteboard

Coffee Service

HTML Code


<div class="bg-white p-6 rounded-lg border border-gray-200">
     <div class="flex flex-col md:flex-row md:gap-6 mb-6">
         <img src="https://picsum.photos/400/250?random=4" alt="Meeting Room" class="w-full md:w-1/3 h-48 object-cover rounded-md mb-4 md:mb-0">
         <div class="flex-1">
            <h2 class="text-xl font-semibold text-gray-800">Reserve a Meeting Room / Coworking Space</h2>
            <p class="text-gray-600 mt-1">Find and book the perfect space for your needs.</p>
             <form action="#" method="POST" class="mt-4">
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="meeting-space" class="block text-sm font-medium text-gray-700 mb-1">Space Type</label>
                        <select id="meeting-space" name="meeting-space" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm">
                            <option>Select Space</option>
                            <option>Small Meeting Room (4 people)</option>
                            <option>Large Conference Room (12 people)</option>
                            <option>Private Office (1 person)</option>
                            <option>Hot Desk (Coworking)</option>
                        </select>
                    </div>
                     <div>
                        <label for="meeting-attendees" class="block text-sm font-medium text-gray-700 mb-1">Number of Attendees</label>
                        <input type="number" name="meeting-attendees" id="meeting-attendees" min="1" placeholder="e.g., 4" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm">
                    </div>
                    <div>
                        <label for="meeting-date" class="block text-sm font-medium text-gray-700 mb-1">Date</label>
                        <input type="date" name="meeting-date" id="meeting-date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm">
                    </div>
                     <div class="grid grid-cols-2 gap-2">
                         <div>
                            <label for="meeting-start-time" class="block text-sm font-medium text-gray-700 mb-1">Start Time</label>
                            <input type="time" name="meeting-start-time" id="meeting-start-time" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm">
                        </div>
                         <div>
                            <label for="meeting-end-time" class="block text-sm font-medium text-gray-700 mb-1">End Time</label>
                            <input type="time" name="meeting-end-time" id="meeting-end-time" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm">
                        </div>
                     </div>
                    <div class="sm:col-span-2">
                        <label for="meeting-booker-name" class="block text-sm font-medium text-gray-700 mb-1">Booker Name / Company</label>
                        <input type="text" name="meeting-booker-name" id="meeting-booker-name" placeholder="Acme Corp / Dana Scully" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm">
                    </div>
                     <div class="sm:col-span-2">
                        <label for="meeting-email" class="block text-sm font-medium text-gray-700 mb-1">Contact Email</label>
                        <input type="email" name="meeting-email" id="meeting-email" placeholder="dana.scully@example.com" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm">
                    </div>
                    <div class="sm:col-span-2">
                        <fieldset>
                            <legend class="block text-sm font-medium text-gray-700 mb-1">Equipment Needed</legend>
                            <div class="mt-2 space-y-2 sm:flex sm:items-center sm:space-y-0 sm:space-x-4">
                                <div class="flex items-center">
                                    <input id="meeting-projector" name="meeting-equipment[]" type="checkbox" value="projector" class="h-4 w-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                                    <label for="meeting-projector" class="ml-2 block text-sm text-gray-900">Projector</label>
                                </div>
                                 <div class="flex items-center">
                                    <input id="meeting-whiteboard" name="meeting-equipment[]" type="checkbox" value="whiteboard" class="h-4 w-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                                    <label for="meeting-whiteboard" class="ml-2 block text-sm text-gray-900">Whiteboard</label>
                                </div>
                                <div class="flex items-center">
                                    <input id="meeting-coffee" name="meeting-equipment[]" type="checkbox" value="coffee" class="h-4 w-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                                    <label for="meeting-coffee" class="ml-2 block text-sm text-gray-900">Coffee Service</label>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                 </div>
                 <div class="mt-6 flex justify-end">
                    <button type="submit" class="bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                        Reserve Space
                    </button>
                </div>
            </form>
         </div>
     </div>
 </div>

Book a Sports Facility

Facility Type

Date

Duration

Start Time

Available in 30-min slots.

Booker Name

Team/Group Name (Optional)

Contact Phone

Contact Email

HTML Code


<div class="bg-white p-6 rounded-lg border border-gray-200">
     <h2 class="text-xl font-semibold text-gray-800 mb-6">Book a Sports Facility</h2>
      <img src="https://picsum.photos/600/200?random=5" alt="Sports Facility" class="w-full h-48 object-cover rounded-md mb-6">
    <form action="#" method="POST">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div>
                <label for="sports-facility" class="block text-sm font-medium text-gray-700 mb-1">Facility Type</label>
                <select id="sports-facility" name="sports-facility" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm">
                    <option>Select Facility</option>
                    <option>Tennis Court (Outdoor)</option>
                    <option>Basketball Court (Indoor)</option>
                    <option>Soccer Field (Grass)</option>
                    <option>Badminton Court</option>
                    <option>Swimming Lane</option>
                </select>
            </div>
            <div>
                <label for="sports-date" class="block text-sm font-medium text-gray-700 mb-1">Date</label>
                <input type="date" name="sports-date" id="sports-date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm">
            </div>
            <div>
                <label for="sports-duration" class="block text-sm font-medium text-gray-700 mb-1">Duration</label>
                <select id="sports-duration" name="sports-duration" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm">
                    <option value="60">1 Hour</option>
                    <option value="90">1.5 Hours</option>
                    <option value="120">2 Hours</option>
                </select>
            </div>
            <div>
                <label for="sports-start-time" class="block text-sm font-medium text-gray-700 mb-1">Start Time</label>
                <input type="time" name="sports-start-time" id="sports-start-time" step="1800" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm">
                <p class="mt-1 text-xs text-gray-500">Available in 30-min slots.</p>
            </div>
            <div class="lg:col-span-2">
                <label for="sports-booker-name" class="block text-sm font-medium text-gray-700 mb-1">Booker Name</label>
                <input type="text" name="sports-booker-name" id="sports-booker-name" placeholder="Fox Mulder" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm">
            </div>
             <div>
                <label for="sports-team-name" class="block text-sm font-medium text-gray-700 mb-1">Team/Group Name (Optional)</label>
                <input type="text" name="sports-team-name" id="sports-team-name" placeholder="The X-Files Team" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm">
            </div>
             <div>
                <label for="sports-phone" class="block text-sm font-medium text-gray-700 mb-1">Contact Phone</label>
                <input type="tel" name="sports-phone" id="sports-phone" placeholder="+1 (555) 777-8888" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm">
            </div>
             <div>
                <label for="sports-email" class="block text-sm font-medium text-gray-700 mb-1">Contact Email</label>
                <input type="email" name="sports-email" id="sports-email" placeholder="fox.mulder@example.com" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm">
            </div>
         </div>
         <div class="mt-8 flex justify-end">
            <button type="submit" class="bg-teal-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
                Book Facility
            </button>
        </div>
    </form>
</div>


  
       
       
       Book Your Relaxation
  

  
      
          Select Treatment
          
      
      
          Therapist Preference (Optional)
          
      
  

  
      
          Preferred Date
          
      
      
          Preferred Time
          
          Appointments available 9:00 AM - 6:00 PM, in 30 min intervals.
      
  

  
      Notes or Health Considerations
      
  

  
    Enhancements (Optional)
    
      
        
          
        
        
          Aromatherapy (+$15)
        
      
      
        
          
        
        
          Hot Towel Treatment (+$10)
        
      
       
        
          
        
        
          Scalp Massage (15 min) (+$25)

FAQ on Tailwind CSS Booking and Reservation Sections

How do I create responsive blog layouts with Tailwind CSS?

Create responsive blog layouts by using Tailwind's breakpoint prefixes like sm:, md:, and lg: with utility classes. Structure your blog with grid or flexbox utilities for content organization. The utility-first approach makes adjusting components for different screen sizes straightforward, eliminating the need for custom media queries.

What are the best practices for blog typography in Tailwind?

Best practices for blog typography include:

Using Tailwind's text utilities for consistent sizing
Implementing proper heading hierarchy with text-xl through text-4xl
Setting comfortable line heights with leading-relaxed
Creating readable paragraph widths
Applying appropriate text colors for contrast
Utilizing font-family utilities for brand consistency

The reading experience depends greatly on good typography choices.

Can I integrate Tailwind blog sections with JavaScript frameworks?

Yes! Tailwind CSS blog sections integrate seamlessly with React, Vue.js, Next.js, and other JavaScript frameworks. Many developers combine Tailwind with these frameworks for building dynamic blog interfaces. The utility classes work the same across all frameworks, making your blog component library truly portable.

How do I customize blog card design using Tailwind?

Customize blog card design by combining Tailwind's utility classes for borders, shadows, padding, and rounded corners. Add hover states with group-hover utilities. Style your post preview cards consistently while maintaining visual hierarchy. TailwindUI offers excellent examples of blog card components for inspiration.

What's the best way to implement dark mode for blog sections?

Implement dark mode by using Tailwind's dark: variant prefix with your utility classes. Structure your blog theming with color variables for consistent switching. Add a toggle component using JavaScript. The dark mode configuration in tailwind.config.js supports both class and media strategies for detecting user preferences.

How do I create an effective blog hero section?

Build an effective hero section by combining:

Eye-catching backgrounds
Clear, large typography
Strategic spacing
Optional CTA buttons
Mobile responsiveness

A well-designed blog hero section immediately communicates your content's value and enhances the user experience for visitors.

What's the optimal way to handle blog image galleries with Tailwind?

Handle blog image galleries using Tailwind's grid or flex utilities for layout. Add hover effects with transition utilities. Ensure mobile-friendly display with responsive classes. Consider lazy-loading images for website performance. Adam Wathan recommends keeping image markup simple while letting utility classes handle the styling.

How do I style an effective newsletter signup section?

Style newsletter signup sections with attention-grabbing backgrounds, clear typography, and well-defined input fields. Use padding and margin utilities for proper spacing. Add hover states to submission buttons. This blog CTA section should be visually distinct while maintaining your site's overall aesthetic.

What's the best approach for styling comment sections?

Create engaging comment sections by:

Using card components for each comment
Adding subtle borders or shadows for separation
Styling author information distinctly
Nesting replies with margin utilities
Ensuring form elements match your blog's design

CodePen has numerous examples of comment styling approaches using Tailwind CSS.

How do I implement blog pagination with Tailwind?

Implement pagination using flexbox utilities for alignment, consistent spacing, and interactive states. Style active, hover and disabled states differently. Ensure mobile-friendly touch targets. Web designers often use the Tailwind CSS framework to create accessible pagination controls that integrate seamlessly with the blog's visual design.