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 5

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

image

pablitodgb

1 year ago

879
Acode Master!
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.2k
InGen

Dennis Kamp

6 months ago

436
rotate card
rotate card

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.3k
About Us Component

KULDEEP

1 year ago

2k
Car booking form
Rental carr booking form to rent a car online

ehmasuk

11 months ago

869
Age verification 18+

Maxim

1 year ago

1.6k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Muhammad Umair Arshad

1 year ago

1.3k
Date picker
Date picker example using flatpickr library

Lîmåã M

3 years ago

18.2k
Our features
Our features

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.9k
Stacked Checkboxes

kishan pc

2 years ago

3.9k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2k