|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Modern Lease Agreement</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
|
|
|
.header-bg { |
|
|
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); |
|
|
} |
|
|
|
|
|
.signature-box { |
|
|
border-bottom: 1px solid #d1d5db; |
|
|
min-width: 250px; |
|
|
} |
|
|
|
|
|
.print-btn:hover { |
|
|
background-color: #4f46e5; |
|
|
} |
|
|
|
|
|
.edit-btn:hover { |
|
|
background-color: #10b981; |
|
|
} |
|
|
|
|
|
input, textarea { |
|
|
border-bottom: 1px dashed #9ca3af; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
input:focus, textarea:focus { |
|
|
outline: none; |
|
|
border-bottom: 1px solid #4f46e5; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
position: relative; |
|
|
padding-left: 1rem; |
|
|
} |
|
|
|
|
|
.section-title:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
height: 100%; |
|
|
width: 4px; |
|
|
background: linear-gradient(to bottom, #4f46e5, #7c3aed); |
|
|
border-radius: 4px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="max-w-4xl mx-auto my-8 bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
|
|
|
<div class="header-bg text-white px-8 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold">RESIDENTIAL LEASE AGREEMENT</h1> |
|
|
<p class="text-indigo-100 mt-1">Legally Binding Contract</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="px-8 py-6"> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="section-title text-xl font-semibold text-gray-800 mb-4">Parties to Agreement</h2> |
|
|
<p class="text-gray-700 mb-4"> |
|
|
This Lease Agreement ("Agreement") is entered into on |
|
|
<input type="text" class="bg-transparent" placeholder="03/09/2025" value="03/09/2025"> |
|
|
between |
|
|
<input type="text" class="bg-transparent" placeholder="[Landlord Name]"> |
|
|
("Landlord"), located at |
|
|
<input type="text" class="bg-transparent" placeholder="[Landlord Address]">, |
|
|
and |
|
|
<input type="text" class="bg-transparent" placeholder="[Tenant Name]"> |
|
|
("Tenant"), located at |
|
|
<input type="text" class="bg-transparent" placeholder="[Tenant Address]">. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="section-title text-xl font-semibold text-gray-800 mb-4">Property Description</h2> |
|
|
<p class="text-gray-700"> |
|
|
The Landlord agrees to rent to the Tenant the residential property located at |
|
|
<input type="text" class="bg-transparent" placeholder="[Property Address]"> |
|
|
("Premises"), including all fixtures and appliances therein. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="section-title text-xl font-semibold text-gray-800 mb-4">Lease Terms</h2> |
|
|
<p class="text-gray-700"> |
|
|
The lease term shall commence on |
|
|
<input type="text" class="bg-transparent" placeholder="[Start Date]"> |
|
|
and shall end on |
|
|
<input type="text" class="bg-transparent" placeholder="[End Date]">, |
|
|
unless terminated earlier in accordance with the terms herein. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="section-title text-xl font-semibold text-gray-800 mb-4">Financial Terms</h2> |
|
|
<div class="ml-4"> |
|
|
<p class="text-gray-700 mb-2"> |
|
|
<span class="font-medium">Monthly Rent:</span> The Tenant agrees to pay rent in the amount of |
|
|
<input type="text" class="bg-transparent" placeholder="[Rent Amount]"> |
|
|
per month, due on the first day of each month. |
|
|
</p> |
|
|
<p class="text-gray-700"> |
|
|
<span class="font-medium">Security Deposit:</span> Upon execution of this Agreement, Tenant shall pay a security deposit of |
|
|
<input type="text" class="bg-transparent" placeholder="[Security Deposit Amount]"> |
|
|
to secure performance of Tenant's obligations hereunder. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="section-title text-xl font-semibold text-gray-800 mb-4">Standard Terms & Conditions</h2> |
|
|
<div class="ml-4 space-y-4"> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800">1. Use of Premises</h3> |
|
|
<p class="text-gray-700"> |
|
|
The Premises shall be used solely as a private residential dwelling and for no other purpose. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800">2. Maintenance and Repairs</h3> |
|
|
<p class="text-gray-700"> |
|
|
Tenant shall maintain the Premises in good condition and promptly report any needed repairs to Landlord. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800">3. Pets</h3> |
|
|
<p class="text-gray-700"> |
|
|
No pets shall be kept on the Premises without prior written consent of Landlord. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800">4. Utilities</h3> |
|
|
<p class="text-gray-700"> |
|
|
Tenant shall be responsible for all utilities unless otherwise specified in writing. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="section-title text-xl font-semibold text-gray-800 mb-4">Special Terms & Conditions</h2> |
|
|
<textarea class="w-full bg-transparent min-h-[100px]" placeholder="[Additional terms and conditions to be specified]"></textarea> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12"> |
|
|
<h2 class="section-title text-xl font-semibold text-gray-800 mb-6">Signatures</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800 mb-2">Landlord Signature</h3> |
|
|
<div class="signature-box pb-2 mb-2"> |
|
|
<input type="text" class="bg-transparent w-full" placeholder="[Landlord Name]"> |
|
|
</div> |
|
|
<p class="text-gray-600">Date: _______________</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800 mb-2">Tenant Signature</h3> |
|
|
<div class="signature-box pb-2 mb-2"> |
|
|
<input type="text" class="bg-transparent w-full" placeholder="[Tenant Name]"> |
|
|
</div> |
|
|
<p class="text-gray-600">Date: _______________</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
