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 7

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

machine
A fully interactive, web-based macOS-style desktop environment featuring draggable and resizable windows, a dynamic Dock with magnification, smooth glass UI effects, adaptive colors, a functional photo gallery with hover menus, and integrated mini-apps like Safari, Notes, Weather, and App Store. Built using HTML, CSS, Tailwind, and JavaScript to recreate a modern OS experience directly in the browser.

Gidy Official

10 months ago

569
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k
lachisa
Lachisa is a modern and innovative solution designed to simplify everyday experiences through smart technology, seamless performance, and user-friendly design. It empowers users with efficiency, reliability, and a future-ready approach.

Lokesh H

2 months ago

333
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

228
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Abdul Jabbar Al Nahid

1 year ago

1.3k
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Muzammil Riaz

1 year ago

1.6k
Stepper - Without Buttons

farisubuntu

2 years ago

2k
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Kirsten F

1 year ago

1.5k
Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

1 month ago

69
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

KULDEEP

1 year ago

1.4k
Show credit card details

Manuela Bianka

3 years ago

13.2k
Invoice
Invoice

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.4k