Chore: Removed @angular/flex-layout and replaced it with tailwind.

Chore: Upgraded some packages

overlord/src/app/client/client-detail/client-detail.component.css

@@ -1,3 +0,0 @@
-.example-card {
-  max-width: 400px;
-}

overlord/src/app/client/client-detail/client-detail.component.html

@@ -1,51 +1,27 @@
-<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
-  <mat-card fxFlex>
+<div class="flex flex-auto flex-row justify-around content-center items-center lg:max-w-[50%]">
+  <mat-card class="flex-auto">
     <mat-card-title-group>
       <mat-card-title>Client</mat-card-title>
     </mat-card-title-group>
     <mat-card-content>
-      <form [formGroup]="form" fxLayout="column">
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
+      <form [formGroup]="form" class="flex flex-col">
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-form-field class="flex-auto">
             <mat-label>Code</mat-label>
             <input matInput placeholder="Code" formControlName="code" />
           </mat-form-field>
         </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-form-field class="flex-auto">
             <mat-label>Name</mat-label>
             <input matInput #nameElement placeholder="Name" formControlName="name" />
           </mat-form-field>
         </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-checkbox formControlName="enabled">Is Enabled?</mat-checkbox>
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-checkbox formControlName="enabled" class="flex-auto">Is Enabled?</mat-checkbox>
         </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-form-field class="flex-auto">
             <mat-label>OTP</mat-label>
             <input matInput placeholder="OTP" formControlName="otp" />
           </mat-form-field>

overlord/src/app/client/client.module.ts

@@ -1,7 +1,6 @@
 import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -23,7 +22,6 @@ import { ClientRoutingModule } from './client-routing.module';
   imports: [
     CommonModule,
     CdkTableModule,
-    FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,