cancel form

This tailwind example is contributed by Anonymous, on 28-Sep-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Anonymous

Tailwind v3.4 6

Fork Fullscreen

//cancel appointment

<div class="flex items-center justify-between
                px-6 py-4 border-b">

<h2 class="text-lg font-semibold text-gray-800">
        Cancel Appointment
      </h2>

<button
        type="button"
        (click)="onClose()"
        class="text-2xl text-gray-500 hover:text-gray-800">
        &times;
      </button>

</div>

<div class="p-6">

<p class="text-sm text-gray-600 mb-5">
        Are you sure you want to cancel this appointment?
      </p>

<div class="bg-gray-50 rounded-md p-4 mb-5">

<div class="mb-2">
          <span class="text-sm text-gray-500">
            Doctor
          </span>

<p class="font-medium text-gray-800">
            {{ doctorName }}
          </p>
        </div>

<div class="mb-2">
          <span class="text-sm text-gray-500">
            Clinic
          </span>

<p class="font-medium text-gray-800">
            {{ clinicName }}
          </p>
        </div>

<p class="font-medium text-gray-800">
              {{ appointmentDate }}
            </p>
          </div>

<p class="font-medium text-gray-800">
              {{ appointmentTime }}
            </p>
          </div>

</div>

<div class="mb-5">

<label class="block text-sm font-medium text-gray-700 mb-1">
          Cancellation Reason
          <span class="text-gray-400">
            (Optional)
          </span>
        </label>

</div>

<div class="flex justify-end gap-3">

<button
          type="button"
          (click)="onClose()"
          class="px-4 py-2 border border-gray-300
                 rounded-md text-gray-700
                 hover:bg-gray-100">
          Keep Appointment
        </button>

<button
          type="button"
          (click)="onConfirmCancel()"
          class="px-4 py-2 bg-red-600 text-white
                 rounded-md hover:bg-red-700">
          Confirm Cancellation
        </button>

</div>

Related Examples

Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Abdul Jabbar Al Nahid

1 year ago

1.3k
Maintenance page

Faye

1 year ago

2.7k
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Anonymous

1 year ago

1.2k
Indented Media Panels

Sherry Lynne

2 months ago

184
background animation
background animation

Anonymous

11 months ago

706
Free Tailwind components,
Free Tailwind components,

Omer fils ELENGA

1 month ago

52
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2.2k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Ahita Bisma Adlula

1 year ago

4.3k
form2

Anonymous

3 weeks ago

6
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

ORGIN_DREAMS

1 year ago

1.6k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Rathanak Phan

1 year ago

2.1k
dashboard

Anonymous

1 month ago

204