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 8

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

Clean Component Sharing Hub (Landing State)
A minimalist, "before-talking" landing screen designed for a code or design component sharing platform. Features a welcoming header, three distinct action cards for sharing/browsing/exporting code, and a floating input bar, all styled with soft shadows and ample white space mimicking modern design tools.

Hamza Atig

9 months ago

891
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Walid Ahmad

2 years ago

2.9k
apply form

Anonymous

4 days ago

5
profile
user profile

gidy

1 year ago

1.1k
htmlcss1

Anonymous

1 year ago

889
Maintenance page template
The site is under maintenance placeholder page

Anonymous

2 years ago

12.4k
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

KULDEEP

1 year ago

1.8k
Taskify Premium Task Management FREE
Website Task management modern and responsif

Alif Bima Pradana

8 months ago

835
htmlcss2

Elsa Khan

1 year ago

577
cancel form

Anonymous

3 weeks ago

6
apply

Anonymous

4 days ago

14
spotify web player

Lokesh H

4 months ago

332