re schedule

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 69

Fork Fullscreen

//reschedule form 
<div class="fixed inset-0 z-50 flex items-center justify-center
            bg-black/50 p-4">

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

<div>
        <h2 class="text-xl font-semibold text-gray-800">
          Reschedule Appointment
        </h2>

<p class="text-sm text-gray-500 mt-1">
          Choose a new date and time
        </p>
      </div>

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

</div>

<form
      [formGroup]="rescheduleForm"
      (ngSubmit)="onSubmit()"
      class="p-6">

<div class="mb-4">

<p class="text-sm text-gray-500 mb-1">
          Doctor
        </p>

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

</div>

<div class="mb-4">

<p class="text-sm text-gray-500 mb-1">
          Clinic
        </p>

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

</div>

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

<p class="text-sm text-gray-500 mb-1">
          Current Appointment
        </p>

<p class="text-sm font-medium text-gray-800">
          {{ currentDate }} at {{ currentTime }}
        </p>

</div>

<div class="mb-4">

</div>

<div class="mb-6">

<option value="">
            Select Available Time
          </option>

@for (slot of availableSlots; track slot) {

}

</select>

</div>

<div class="flex justify-end gap-3 pt-4 border-t">

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

<button
          type="submit"
          class="px-5 py-2 bg-blue-600 text-white
                 rounded-md hover:bg-blue-700">
          Reschedule
        </button>

</div>

</form>

</div>

Related Examples

3d card
the Best 3D card with tailwind css

irahoza daniel

1 year ago

1.5k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.4k
Interactive 3D Morphing Globe - Sphere to Star
3D interactive particle globe that morphs between a sphere and a star shape. Features custom glassmorphism UI, click-to-pulse bloom effects, and dynamic color themes. Built by Mostafa Niloy (Visernic Limited) using Three.js and Tailwind CSS.

Visernic

4 months ago

469
magic card
by salvator

Baraka Salvator

1 year ago

1.5k
Visernic Brand Logo | Logo Vector
Official SVG logo of Visernic Limited—a digital solutions agency offering software development, IT consulting, cybersecurity, and digital marketing worldwide. This vector asset is fully scalable and optimized for fast web performance.

Visernic

2 months ago

178
form2

Anonymous

6 days ago

6
simple responsive blog layout with sidebar

Isabella Kowalski

3 years ago

10.4k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Abdul Baset Bappy

1 year ago

2.6k
Maintenance page

Faye

1 year ago

2.7k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

KULDEEP

1 year ago

2.5k
htmlcss0

Anonymous

1 year ago

1.1k
Coffee Menu

ariaw

1 year ago

929