<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="tw-max-w-md tw-mx-auto tw-bg-white tw-p-8 tw-shadow-md tw-rounded-lg">
  <div class="tw-text-50px tw-font-bold tw-pb-10 tw-mx-auto tw-text-center">Login</div>

  <div class="tw-mb-4">
    <label for="username" class="tw-block tw-text-gray-700 tw-font-bold tw-mb-2">Username</label>
    <input id="username" type="text" formControlName="username" class="tw-shadow tw-appearance-none tw-border tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-gray-700 leading-tight focus:tw-outline-none">
    <div *ngIf="loginForm.get('username')?.invalid && loginForm.get('username')?.touched"  class=" tw-text-xs tw-mt-2 text-error">
      Username is required.
    </div>
  </div>

  <div class="tw-mb-6">
    <label for="password" class="tw-block tw-text-gray-700 tw-font-bold tw-mb-2">Password</label>
    <input id="password" type="password" formControlName="password" class="tw-shadow tw-appearance-none tw-border tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-gray-700 leading-tight focus:tw-outline-none">
    <div *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched" class="tw-text-xs tw-mt-2 text-error">
      Password must be at least 6 characters long.
    </div>
  </div>

  <div class="tw-flex tw-items-center tw-justify-between tw-mb-4">
    <a routerLink="/#" class="tw-inline-block tw-align-baseline tw-font-bold tw-text-sm tw-text-blue-500 hover:tw-text-blue-800">
      Forgot password?
    </a>
  </div>

  <div>
    <button class="tw-bg-blue-500 tw-text-white tw-font-bold tw-py-2 tw-px-4 tw-rounded focus:tw-outline-none focus:tw-shadow-outline tw-w-full" type="submit" [disabled]="loginForm.invalid">Login</button>
  </div>
  <div class="tw-text-center tw-mt-4">
    <a routerLink="/#" class="tw-text-sm tw-text-blue-500 hover:tw-text-blue-800">Register now!</a>
  </div>

</form>