Enhanced Tax Form - Copy this Angular, Tailwind Component to your project

<div class="container mx auto p 6"> <form [formGroup]="employeeForm" (ngSubmit)="onSubmit()" class="space y 8"> <! Employee Details Form Group > <fieldset class="border p 4 rounded md"> <legend class="text lg font semibold">Employee Details</legend> <div class="grid grid cols 1 gap 4 md:grid cols 2"> <div> <label class="block font medium">Name of the Employee</label> <input formControlName="Name" class="w full border rounded md p 2" /> </div> <div> <label class="block font medium">Address of the Employee</label> <input formControlName="Address" class="w full border rounded md p 2" /> </div> <div> <label class="block font medium">Employee Code</label> <input formControlName="employeeCode" class="w full border rounded md p 2" /> </div> <div> <label class="block font medium">Permanent Account Number (PAN)</label> <input formControlName="pan" class="w full border rounded md p 2" /> </div> <div> <label class="block font medium mb 2">Select The Tax Regime</label> <div class="inline flex border rounded md overflow hidden"> <label> <input type="radio" formControlName="taxRegime" value="old" class="hidden peer" /> <div class="w 24 text center p 2 cursor pointer peer checked:bg blue 500 peer checked:text white peer checked:font semibold"> Old </div> </label> <label> <input type="radio" formControlName="taxRegime" value="new" class="hidden peer" /> <div class="w 24 text center p 2 cursor pointer peer checked:bg blue 500 peer checked:text white peer checked:font semibold"> New </div> </label> </div> </div> <div> <label class="block font medium mb 2" for="financialYear">Financial Year</label> <div class="relative"> <select id="financialYear" formControlName="financialYear" class="block w full px 4 py 2 border border gray 300 rounded md focus:outline none focus:ring 2 focus:ring blue 500 focus:border blue 500"> <option value="" disabled selected>Select Financial Year</option> <option *ngFor="let year of years" [value]="year"> {{ year }} </option> </select> </div> </div> </div> <p class="text sm mt 2">Note: Option once selected cannot be changed during the year.</p> </fieldset> <! Rent Allowance Form Group > <fieldset class="border p 4 rounded md"> <legend class="text lg font semibold"> House Rent Allowance</legend> <div class="grid grid cols 1 gap 4 md:grid cols 2"> <div> <label class="block font medium">Rent Paid to the Landlord</label> <input formControlName="rentPaid" class="w full border rounded md p 2" /> </div> <div> <label class="block font medium">Name of the Landlord</label> <input formControlName="landlordName" class="w full border rounded md p 2" /> </div> <div> <label class="block font medium">Address of the Landlord</label> <input formControlName="landlordAddress" class="w full border rounded md p 2" /> </div> <div> <label class="block font medium">Permanent Account Number of the Landlord</label> <input formControlName="landlordPAN" class="w full border rounded md p 2" /> </div> </div> </fieldset> <! Leave Travel Allowance Form Group > <fieldset class="border p 4 rounded md"> <legend class="text lg font semibold">Leave Travel Allowance</legend> <div class="grid grid cols 1"> <div> <label class="block font medium">Leave Travel Concessions or Assistance</label> <input formControlName="leaveTravel" class="w full border rounded md p 2" /> </div> </div> </fieldset> <! Housing Loan Allowance Form Group > <fieldset class="border p 4 rounded md"> <legend class="text lg font semibold"> Interest on Housing Loan</legend> <div class="grid grid cols 1 gap 4 md:grid cols 2"> <div> <label class="block font medium">Interest Payable/Paid to the Lender</label> <input formControlName="interestPaid" class="w full border rounded md p 2" /> </div> <div> <label class="block font medium">Name of the Lender</label> <input formControlName="lenderName" class="w full border rounded md p 2" /> </div> <div> <label class="block font medium">Address of the Lender</label> <input formControlName="lenderAddress" class="w full border rounded md p 2" /> </div> <div> <label class="block font medium">Permanent Account Number of the Lender</label> <input formControlName="lenderPAN" class="w full border rounded md p 2" /> </div> </div> </fieldset> <fieldset class="border p 4 rounded md"> <legend class="text lg font semibold">Deduction underchapter VI A </legend> <div class="p 6 bg gray 50 rounded lg shadow md"> <h2 class="text xl font bold text gray 700 mb 4">Deductions under Chapter VI A</h2> <! Section A > <div class="mb 6"> <h3 class="text lg font semibold text gray 600">A) Section 80C, 80CCC, and 80CCD</h3> <! Section 80C > <div class="mt 4"> <h4 class="text md font medium text gray 600">i) Section 80C</h4> <div *ngFor="let item of section80C; let i = index" class="mt 2"> <label class="block text sm text gray 600"> ({{ getLabel(i) }}) </label> <input type="text" class="w full px 4 py 2 mt 1 text sm border rounded lg focus:ring 2 focus:ring blue 400 focus:outline none" [(ngModel)]="section80C[i]" /> </div> </div> <! Section 80CCC > <div class="mt 4"> <h4 class="text md font medium text gray 600">ii) Section 80CCC</h4> <input type="text" class="w full px 4 py 2 mt 1 text sm border rounded lg focus:ring 2 focus:ring blue 400 focus:outline none" [(ngModel)]="section80CCC" /> </div> <! Section 80CCD > <div class="mt 4"> <h4 class="text md font medium text gray 600">iii) Section 80CCD</h4> <input type="text" class="w full px 4 py 2 mt 1 text sm border rounded lg focus:ring 2 focus:ring blue 400 focus:outline none" [(ngModel)]="section80CCD" /> </div> </div> <! Section B > <div> <h3 class="text lg font semibold text gray 600">B) Other Sections (e.g., 80D, 80E, 80TTA, etc.)</h3> <div *ngFor="let section of otherSections; let i = index" class="mt 2"> <label class="block text sm text gray 600"> ({{ i + 1 }}) Section </label> <input type="text" class="w full px 4 py 2 mt 1 text sm border rounded lg focus:ring 2 focus:ring blue 400 focus:outline none" [(ngModel)]="otherSections[i]" /> </div> </div> </div> </fieldset> <div> <h2 class="text lg font bold mb 4">Annexure 1</h2> <p class="text sm mb 6"> Documents to be provided by January 2021: Rent agreement (for monthly rent exceeding Rs. 10,000) and receipts for all months are to be provided. If the rent amount exceeds Rs. 100,000 p.a., the PAN of the landlord is mandatory. In the event that the landlord does not have a PAN, a letter with the name, address, and declaration stating that he or she does not have a PAN should be obtained. In the absence of this, HRA benefit cannot be given. <table class="w full border collapse border border gray 300 text left"> <thead> <tr class="bg gray 100"> <th class="border border gray 300 px 4 py 2">Month</th> <th class="border border gray 300 px 4 py 2">Amount (Rs.)</th> </tr> </thead> <tbody> <tr *ngFor="let month of rentDetails"> <td class="border border gray 300 px 4 py 2">{{ month.name }}</td> <td class="border border gray 300 px 4 py 2"> <input type="number" class="w full px 2 py 1 border rounded md focus:outline none focus:ring focus:ring blue 300" /> </td> </tr> </tbody> </table> </div> <! <div class="mb 8 overflow x auto"> <h2 class="text xl font semibold mb 4">Monthly Rent Details</h2> <table class="min w full divide y divide gray 200"> <thead class="bg gray 50"> <tr> <th class="px 6 py 3 text left text xs font medium text gray 500 uppercase tracking wider">Month </th> <th class="px 6 py 3 text left text xs font medium text gray 500 uppercase tracking wider"> Amount</th> </tr> </thead> <tbody class="bg white divide y divide gray 200"> <tr *ngFor="let month of months; let i = index" class="hover:bg gray 50"> <td class="px 6 py 4 whitespace nowrap text sm text gray 500">{{month}}</td> <td class="px 6 py 4 whitespace nowrap"> <input type="number" [formControlName]="'month' + i" class="block w full rounded md border gray 300 shadow sm focus:border blue 500 focus:ring blue 500"> </td> </tr> </tbody> <tfoot> <tr class="bg gray 50"> <td class="px 6 py 4 whitespace nowrap font medium">Total</td> <td class="px 6 py 4 whitespace nowrap font medium">{{totalRent | currency:'INR'}}</td> </tr> </tfoot> </table> </div> > <! Submit Button > <button type="submit" class="bg blue 500 text white px 4 py 2 rounded md">Submit</button> </form> </div> prepare them in more nicer way