interview status

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

Other

Author Anonymous

Tailwind v3.4 9

Fork Fullscreen

//interview schedule form
<div class="mx-auto max-w-2xl rounded-xl bg-white p-6 shadow">
  <h2 class="mb-6 text-xl font-semibold text-gray-800">
    Schedule Interview
  </h2>

<div class="mb-5">
      <label class="mb-1 block text-sm font-medium">
        Interview Date *
      </label>

@if (
        interviewForm.controls.interviewDate.touched &&
        interviewForm.controls.interviewDate.invalid
      ) {
        <p class="mt-1 text-sm text-red-600">
          Interview date is required.
        </p>
      }
    </div>

<div class="mb-5">
      <label class="mb-1 block text-sm font-medium">
        Interview Location *
      </label>

@if (
        interviewForm.controls.interviewLocation.touched &&
        interviewForm.controls.interviewLocation.invalid
      ) {
        <p class="mt-1 text-sm text-red-600">
          Interview location is required.
        </p>
      }
    </div>

<div class="mb-6">
      <label class="mb-1 block text-sm font-medium">
        Interview Remarks
      </label>

<div class="flex justify-end">
      <button
        type="submit"
        class="rounded-md bg-blue-600 px-5 py-2 text-white hover:bg-blue-700"
      >
        Schedule Interview
      </button>
    </div>

</form>
</div>

<!-- import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  FormGroup,
  FormControl,
  Validators,
  ReactiveFormsModule
} from '@angular/forms';

@Component({
  selector: 'app-scheduled-interview',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './scheduled-interview.component.html'
})
export class ScheduledInterviewComponent {
  @Input() applicationId!: string;

interviewForm = new FormGroup({
    interviewDate: new FormControl('', [
      Validators.required
    ]),
    interviewLocation: new FormControl('', [
      Validators.required
    ]),
    interviewRemarks: new FormControl('')
  });

onSubmit(): void {
    if (this.interviewForm.invalid) {
      this.interviewForm.markAllAsTouched();
      return;
    }

const data = {
      id: this.applicationId,
      ...this.interviewForm.getRawValue()
    };

console.log(data);

// Call Schedule Interview API here.
  }
} -->

//update status service

<!-- public async Task UpdateStatusAsync(Guid id, ApplicationStatus status)
{
    var application = await _repository.GetByIdAsync(id);

if (application == null)
        throw new KeyNotFoundException("Application not found.");

var currentStatus = application.Status;

if (!Enum.IsDefined(status))
        throw new ArgumentException("Invalid application status.");

bool isValidTransition = currentStatus switch
    {
        ApplicationStatus.Submitted =>
            status == ApplicationStatus.UnderReview,

ApplicationStatus.UnderReview =>
            status == ApplicationStatus.Waitlisted ||
            status == ApplicationStatus.Rejected,

ApplicationStatus.InterviewScheduled =>
            status == ApplicationStatus.Confirmed ||
            status == ApplicationStatus.Waitlisted ||
            status == ApplicationStatus.Rejected,

ApplicationStatus.Waitlisted =>
            status == ApplicationStatus.Confirmed ||
            status == ApplicationStatus.Rejected,

_ => false
    };

if (!isValidTransition)
    {
        throw new InvalidOperationException(
            $"Status cannot be changed from {currentStatus} to {status}.");
    }

if (status == ApplicationStatus.Confirmed)
    {
        application.ConfirmedOn = DateTime.UtcNow;
        application.AdmissionFeeDueDate = DateTime.UtcNow.AddDays(7);
    }

application.Status = status;

_repository.Update(application);
    await _repository.SaveChangesAsync();
} -->

Related Examples

Invoice
Invoice

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.5k
ForK blocks animations
ForK blocks animations

Yor Rodriguez

1 year ago

2.4k
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
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Alif Bima Pradana

9 months ago

1.3k
Age verification 18+

Maxim

1 year ago

1.6k
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Muhammad Umair Arshad

1 year ago

2k
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

1 month ago

100
free tailwind resume template
free tailwind resume template

Geoffrey Callaghan

2 years ago

4.8k
Simple Payment Successfull Notification Page

Anonymous

1 year ago

2.5k
Login page

Reuben Enahoro

1 year ago

2.9k
apply form

Anonymous

3 weeks ago

10
loginForm2
form

Anonymous

1 month ago

261