Appointments Timeline - Copy this Angular, Tailwind Component to your project

<div class="w full bg gradient to r from white via gray 50 to gray 100 shadow lg rounded lg p 4"> <h2 class="text 2xl font bold text gray 800 mb 4">Appointments Timeline</h2> <div class="flex gap 4" *ngFor="let appointment of appointments; let i = index" [style.marginLeft.%]="calculatePosition(appointment.startTime)"> <div [ngClass]="getCardColor(i)" class="p 4 transition all duration 300 hover:shadow lg cursor pointer rounded lg" (click)="viewAppointment(appointment)" [attr.aria label]="'Appointment: ' + appointment.title" tabindex="0" (keydown.enter)="viewAppointment(appointment)"> <h3 class="text lg font semibold text indigo 600">{{appointment.title}}</h3> <p class="text gray 600">{{appointment.startTime | date:'shortTime'}} {{appointment.endTime | date:'shortTime'}}</p> <p class="text gray 500 text sm mt 2">{{appointment.description}}</p> </div> </div> <div class="relative"> <! Appointment Cards > <! Timeline > <div class="border t 2 border gray 300 mt 8" role="timeline"> <div class="flex flex wrap justify between md:flex nowrap"> <ng container *ngFor="let hour of timelineHours"> <div class="text center relative mb 4 md:mb 0" [attr.aria label]="'Timeline marker: ' + hour + ':00'"> <div class="absolute top 3 w px h 3 bg gray 300 left 1/2"></div> <span class="text sm text gray 600 mt 2 block">{{hour}}:00</span> </div> </ng container> </div> </div> </div> </div> make this UI responsive on phone screen // Function to calculate the position of the appointment on the timeline calculatePosition(startTime: Date): number { const startHour = startTime.getHours() + startTime.getMinutes() / 60; const timelineStart = this.timelineHours[0]; // Start time is the first hour in the timeline const timelineLength = this.timelineHours[this.timelineHours.length 1] timelineStart; return ((startHour timelineStart) / timelineLength) * 100; }