register

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 115

Fork Fullscreen

//register form
@if (visible) {
  <div
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
    (click)="closeModal()"
  >
    <div
      class="w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-2xl bg-white shadow-2xl"
      (click)="$event.stopPropagation()"
    >
      
      <div class="sticky top-0 z-10 flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4">
        <div>
          <h2 class="text-xl font-semibold text-gray-800">
            Parent Registration
          </h2>
          <p class="mt-1 text-sm text-gray-500">
            Enter your details to create an account.
          </p>
        </div>

<form
        [formGroup]="registrationForm"
        (ngSubmit)="onSubmit()"
        novalidate
      >
        <div class="grid grid-cols-1 gap-5 p-6 md:grid-cols-2">

<div>
            <label for="fullName" class="mb-1.5 block text-sm font-medium text-gray-700">
              Full Name <span class="text-red-500">*</span>
            </label>

@if (f.fullName.touched && f.fullName.errors) {
              <div class="mt-1 text-xs text-red-600">
                @if (f.fullName.errors['required']) {
                  <p>Full name is required.</p>
                }
                @if (f.fullName.errors['maxlength']) {
                  <p>Maximum 100 characters allowed.</p>
                }
                @if (f.fullName.errors['pattern']) {
                  <p>Only alphabets and spaces are allowed.</p>
                }
              </div>
            }
          </div>

<div>
            <label for="email" class="mb-1.5 block text-sm font-medium text-gray-700">
              Email <span class="text-red-500">*</span>
            </label>

@if (f.email.touched && f.email.errors) {
              <div class="mt-1 text-xs text-red-600">
                @if (f.email.errors['required']) {
                  <p>Email is required.</p>
                }
                @if (f.email.errors['email']) {
                  <p>Enter a valid email address.</p>
                }
                @if (f.email.errors['maxlength']) {
                  <p>Email is too long.</p>
                }
              </div>
            }
          </div>

<div>
            <label for="password" class="mb-1.5 block text-sm font-medium text-gray-700">
              Password <span class="text-red-500">*</span>
            </label>

<p class="mt-1 text-xs text-gray-500">
              8–24 characters with uppercase, lowercase, number and special character.
            </p>

@if (f.password.touched && f.password.errors) {
              <div class="mt-1 text-xs text-red-600">
                @if (f.password.errors['required']) {
                  <p>Password is required.</p>
                }
                @if (f.password.errors['minlength'] || f.password.errors['maxlength']) {
                  <p>Password must be 8–24 characters long.</p>
                }
                @if (f.password.errors['pattern']) {
                  <p>Include uppercase, lowercase, a digit and a special character. Spaces are not allowed.</p>
                }
              </div>
            }
          </div>

<div>
            <label for="confirmPassword" class="mb-1.5 block text-sm font-medium text-gray-700">
              Confirm Password <span class="text-red-500">*</span>
            </label>

@if (f.confirmPassword.touched && f.confirmPassword.errors?.['required']) {
              <p class="mt-1 text-xs text-red-600">
                Confirm password is required.
              </p>
            }

@if (
              f.confirmPassword.touched &&
              f.confirmPassword.value &&
              registrationForm.errors?.['passwordMismatch']
            ) {
              <p class="mt-1 text-xs text-red-600">
                Passwords do not match.
              </p>
            }
          </div>

<div>
            <label for="phoneNumber" class="mb-1.5 block text-sm font-medium text-gray-700">
              Phone Number <span class="text-red-500">*</span>
            </label>

@if (f.phoneNumber.touched && f.phoneNumber.errors) {
              <div class="mt-1 text-xs text-red-600">
                @if (f.phoneNumber.errors['required']) {
                  <p>Phone number is required.</p>
                }
                @if (f.phoneNumber.errors['pattern']) {
                  <p>Enter exactly 10 digits.</p>
                }
              </div>
            }
          </div>

<div>
            <label for="emergencyContactNumber" class="mb-1.5 block text-sm font-medium text-gray-700">
              Emergency Contact Number
              <span class="text-gray-400">(Optional)</span>
            </label>

@if (
              f.emergencyContactNumber.touched &&
              f.emergencyContactNumber.errors?.['pattern']
            ) {
              <p class="mt-1 text-xs text-red-600">
                Enter exactly 10 digits.
              </p>
            }
          </div>

<div class="md:col-span-2">
            <label for="residentialAddress" class="mb-1.5 block text-sm font-medium text-gray-700">
              Residential Address <span class="text-red-500">*</span>
            </label>

<div class="mt-1 flex items-start justify-between gap-3">
              <div class="text-xs text-red-600">
                @if (
                  f.residentialAddress.touched &&
                  f.residentialAddress.errors?.['required']
                ) {
                  <p>Residential address is required.</p>
                }

@if (
                  f.residentialAddress.touched &&
                  f.residentialAddress.errors?.['maxlength']
                ) {
                  <p>Maximum 300 characters allowed.</p>
                }
              </div>

<span class="shrink-0 text-xs text-gray-400">
                {{ f.residentialAddress.value.length }}/300
              </span>
            </div>
          </div>

</div>

<div class="flex justify-end gap-3 border-t border-gray-200 bg-gray-50 px-6 py-4">
          <button
            type="button"
            (click)="closeModal()"
            class="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-100"
          >
            Cancel
          </button>

<button
            type="submit"
            class="rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-blue-700 focus:ring-4 focus:ring-blue-200"
          >
            Register
          </button>
        </div>
      </form>
    </div>
  </div>
}

<!-- import { Component, EventEmitter, Input, Output } from '@angular/core';
import {
  AbstractControl,
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  ValidationErrors,
  ValidatorFn,
  Validators
} from '@angular/forms';

const passwordMatchValidator: ValidatorFn = (
  control: AbstractControl
): ValidationErrors | null => {
  const password = control.get('password')?.value;
  const confirmPassword = control.get('confirmPassword')?.value;

if (!password || !confirmPassword) {
    return null;
  }

return password === confirmPassword
    ? null
    : { passwordMismatch: true };
};

@Component({
  selector: 'app-parent-registration-modal',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './parent-registration-modal.component.html'
})
export class ParentRegistrationModalComponent {
  @Input() visible = false;

@Output() closed = new EventEmitter<void>();
  @Output() registered = new EventEmitter<{
    fullName: string;
    email: string;
    password: string;
    phoneNumber: string;
    residentialAddress: string;
    emergencyContactNumber: string;
  }>();

submitted = false;

registrationForm = new FormGroup(
    {
      fullName: new FormControl('', {
        nonNullable: true,
        validators: [
          Validators.required,
          Validators.maxLength(100),
          Validators.pattern(/^[A-Za-z ]+$/)
        ]
      }),

email: new FormControl('', {
        nonNullable: true,
        validators: [
          Validators.required,
          Validators.email,
          Validators.maxLength(254)
        ]
      }),

password: new FormControl('', {
        nonNullable: true,
        validators: [
          Validators.required,
          Validators.minLength(8),
          Validators.maxLength(24),
          Validators.pattern(
            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9\s])\S{8,24}$/
          )
        ]
      }),

confirmPassword: new FormControl('', {
        nonNullable: true,
        validators: [Validators.required]
      }),

phoneNumber: new FormControl('', {
        nonNullable: true,
        validators: [
          Validators.required,
          Validators.pattern(/^\d{10}$/)
        ]
      }),

residentialAddress: new FormControl('', {
        nonNullable: true,
        validators: [
          Validators.required,
          Validators.maxLength(300)
        ]
      }),

emergencyContactNumber: new FormControl('', {
        nonNullable: true,
        validators: [Validators.pattern(/^\d{10}$/)]
      })
    },
    { validators: passwordMatchValidator }
  );

get f() {
    return this.registrationForm.controls;
  }

closeModal(): void {
    this.registrationForm.reset();
    this.submitted = false;
    this.closed.emit();
  }

onSubmit(): void {
    this.submitted = true;
    this.registrationForm.markAllAsTouched();

if (this.registrationForm.invalid) {
      return;
    }

const {
      confirmPassword,
      ...registrationData
    } = this.registrationForm.getRawValue();

this.registered.emit(registrationData);
  }
} -->

Related Examples

card

Raul antonio de la cruz hernandez

10 months ago

758
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

irahoza daniel

1 year ago

1.5k
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Nick Girga

1 year ago

1.4k
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k
Live Chat Component using Tailwind Alpine JS
Live Chat Component using Tailwind Alpine JS

Ahita Bisma Adlula

1 year ago

1.3k
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

nejaa badr

2 years ago

2.9k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

10 months ago

789
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

SHARIFUL ISLAM

1 year ago

2.4k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2.5k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Ameth Galarcio

2 years ago

4.7k
Cards with animated corners

Anonymous

2 weeks ago

14
Coffee Menu

ariaw

1 year ago

961