CODE
1- Login Page:-
import React from "react";
import "tailwindcss/tailwind.css";
function LoginPage() {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100">
<div className="bg-white shadow-lg rounded-lg p-8 max-w-md w-full">
<h2 className="text-2xl font-bold text-center text-gray-800 mb-6">Login to
Your Account</h2>
<form>
<div className="mb-4">
<label htmlFor="email" className="block text-gray-700 font-medium mb-
2">Email Address</label>
<input
type="email"
id="email"
className="w-full px-4 py-2 border rounded-lg focus:outline-none
focus:ring-2 focus:ring-blue-500"
placeholder="Enter your email"
/>
</div>
<div className="mb-6">
<label htmlFor="password" className="block text-gray-700 font-medium
mb-2">Password</label>
<input
type="password"
id="password"
className="w-full px-4 py-2 border rounded-lg focus:outline-none
focus:ring-2 focus:ring-blue-500"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-
600 transition duration-200"
>
Login
</button>
</form>
<p className="text-center text-gray-600 mt-4">
Don't have an account? <a href="#" className="text-blue-500
hover:underline">Sign up</a>
</p>
</div>
</div>
);
}
export default LoginPage;
OUTCOME:-
HOME PAGE:-
import React from "react";
import "tailwindcss/tailwind.css";
function HomePage() {
return (
<div className="
font-sans">
<header className="bg-gray-800 text-white py-4">
<div className="container mx-auto text-center">
<h1 className="text-3xl font-bold">Urban Services - Dehradun</h1>
</div>
</header>
<nav className="bg-gray-700 text-white py-3">
<div className="container mx-auto flex justify-center space-x-6">
<a href="#" className="hover:underline">Home</a>
<a href="#services" className="hover:underline">Services</a>
<a href="#about" className="hover:underline">About Us</a>
<a href="#contact" className="hover:underline">Contact</a>
</div>
</nav>
<div className="hero bg-cover bg-center h-80 flex items-center justify-center text-white"
style={{ backgroundImage: "url('https://via.placeholder.com/1920x500')" }}>
<div className="text-center">
<h1 className="text-4xl font-bold">Professional Home Services in Dehradun</h1>
<p className="mt-2">Reliable, Affordable, and Convenient</p>
</div>
</div>
<section id="services" className="py-12">
<h2 className="text-center text-3xl font-bold mb-8">Our Services</h2>
<div className="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="border rounded-lg shadow-md p-4 text-center">
<img src="https://via.placeholder.com/250" alt="Cleaning Services" className="mx-
auto mb-4 rounded-md" />
<h3 className="text-xl font-semibold">Cleaning Services</h3>
<p className="text-gray-600">Get your home sparkling clean with our professional
services.</p>
</div>
<div className="border rounded-lg shadow-md p-4 text-center">
<img src="https://via.placeholder.com/250" alt="Plumbing Services" className="mx-
auto mb-4 rounded-md" />
<h3 className="text-xl font-semibold">Plumbing Services</h3>
<p className="text-gray-600">Quick and reliable plumbing solutions for your
home.</p>
</div>
<div className="border rounded-lg shadow-md p-4 text-center">
<img src="https://via.placeholder.com/250" alt="Beauty Services" className="mx-auto
mb-4 rounded-md" />
<h3 className="text-xl font-semibold">Beauty Services</h3>
<p className="text-gray-600">Pamper yourself with our expert beauty treatments at
home.</p>
</div>
<div className="border rounded-lg shadow-md p-4 text-center">
<img src="https://via.placeholder.com/250" alt="Electrical Repairs" className="mx-
auto mb-4 rounded-md" />
<h3 className="text-xl font-semibold">Electrical Repairs</h3>
<p className="text-gray-600">Expert electricians to handle all your electrical
needs.</p>
</div>
</div>
</section>
<footer className="bg-gray-800 text-white py-4">
<div className="container mx-auto text-center">
<p>© 2024 Urban Services - Dehradun. All Rights Reserved.</p>
</div>
</footer>
</div>
);
export default HomePage;
OUTCOMES:-
SEARCH LOCATION FIELD:-
import React from "react";
import "tailwindcss/tailwind.css";
function LocationSearchPage() {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100">
<div className="bg-white shadow-lg rounded-lg p-8 max-w-md w-full">
<h2 className="text-2xl font-bold text-center text-gray-800 mb-6">Find Services in
Your Location</h2>
<form>
<div className="mb-4">
<label htmlFor="location" className="block text-gray-700 font-medium mb-
2">Search Location</label>
<input
type="text"
id="location"
className="w-full px-4 py-2 border rounded-lg focus:outline-none
focus:ring-2 focus:ring-blue-500"
placeholder="Enter your city or area"
/>
</div>
<button
type="submit"
className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600
transition duration-200"
>
Search
</button>
</form>
<p className="text-center text-gray-600 mt-4">
Popular Locations: <a href="#" className="text-blue-500
hover:underline">Dehradun</a>, <a href="#" className="text-blue-500
hover:underline">Mumbai</a>, <a href="#" className="text-blue-500
hover:underline">Delhi</a>
</p>
</div>
</div>
);
export default LocationSearchPage;
OUTCOMES:-
