Anonymous

Tax Declaration 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">--<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>--<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>--<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>--<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>--<div-class="mb-6">-<h3-class="text-lg-font-semibold-text-gray-600">A)-Section-80C,-80CCC,-and-80CCD</h3>--<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>--<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>--<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>--<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>---<button-type="submit"-class="bg-blue-500-text-white-px-4-py-2-rounded-md">Submit</button>-</form>-</div>-create-it-in-a-more-nicer-way-with-the-same-content

Prompt

About

Tax Declaration Form - Collect employee details, tax regimes, and deductions seamlessly. Built with Angular and Tailwind. View and copy code!

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

About

Tags

Share