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

Chore: Upgraded some packages

overlord/src/app/product-group/product-group-detail/product-group-detail.component.css

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

overlord/src/app/product-group/product-group-detail/product-group-detail.component.html

@@ -1,18 +1,12 @@
-<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>Product Group</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>Name</mat-label>
             <input
               matInput

overlord/src/app/product-group/product-group.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';
@@ -20,7 +19,6 @@ import { ProductGroupRoutingModule } from './product-group-routing.module';
   imports: [
     CommonModule,
     CdkTableModule,
-    FlexLayoutModule,
     MatTableModule,
     MatPaginatorModule,
     MatSortModule,