Enhanced Form - Copy this React, Tailwind Component to your project

given-this-form-in-angular-material:-<!---<p>eventos-recurrentes-form-works!</p>--->-<form-[formGroup]="form"-fxLayout="column"-fxLayoutGap="10px">-<mat-form-field-appearance="fill">-<mat-label>id</mat-label>-<input-matInput-formControlName-=-"id">-</mat-form-field>-<mat-form-field-appearance="fill">-<mat-label>Descripcion</mat-label>-<input-matInput-formControlName-=-"descripcion">-</mat-form-field>-<mat-form-field-appearance="fill">-<mat-label>Monto</mat-label>-<input-matInput-formControlName="monto"-type="number">-</mat-form-field>-<mat-form-field-appearance="fill">-<mat-label>Fecha-Limite</mat-label>-<input-matInput-formControlName="fechaLimite"-[matDatepicker]="picker1">-<mat-datepicker-toggle-matSuffix-[for]="picker1"></mat-datepicker-toggle>-<mat-datepicker-#picker1></mat-datepicker>-</mat-form-field>-<mat-form-field-appearance="fill">-<mat-label>Fecha-Aviso-Pago</mat-label>-<input-matInput-formControlName="fechaAvisoPago"-[matDatepicker]="picker2">-<mat-datepicker-toggle-matSuffix-[for]="picker2"></mat-datepicker-toggle>-<mat-datepicker-#picker2></mat-datepicker>-</mat-form-field>-<mat-form-field-appearance="fill">-<mat-label>Status-de-Pago</mat-label>-<mat-select-formControlName="statusPago">-<mat-option-*ngFor="let-status-of-statusPagoOptions"-[value]="status.value">-{{-status.viewValue-}}-</mat-option>-</mat-select>-</mat-form-field>-<mat-checkbox-formControlName="abonos">Abonos</mat-checkbox>-<!---botones--->-<div-fxLayout="row"-fxLayoutAlign="end-center"-fxLayoutGap="10px">-<button-mat-raised-button-color="primary"-(click)="save()">Guardar</button>-<button-mat-raised-button-(click)="close()">Cancelar</button>-</div>-</form>-,-add-a-better-design