Landing Page Project — TailwindCSS

npm create vite@latest tailwind-landing cd tailwind-landing npm install npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [], }

@tailwind base; @tailwind components; @tailwind utilities;

export default function App() { return ( <div className="font-sans text-gray-800"> <Hero /> <Features /> <Testimonials /> <CTA /> <Footer /> </div> ) }

export default function Hero() { return ( <section className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-20 px-6 text-center"> <h1 className="text-4xl md:text-6xl font-bold mb-6"> Build Stunning Websites with TailwindCSS </h1> <p className="text-lg md:text-xl mb-8 max-w-2xl mx-auto"> Tailwind gives you the power to build modern, responsive designs faster than ever. </p> <div className="flex justify-center gap-4"> <a href="#features" className="bg-white text-indigo-600 font-semibold px-6 py-3 rounded-lg shadow hover:scale-105 transition"> Get Started </a> <a href="#learn" className="border border-white px-6 py-3 rounded-lg hover:bg-white hover:text-indigo-600 transition"> Learn More </a> </div> </section> ) }

const features = [ { title: "Fast Development", desc: "Utility-first classes make building UI super quick." }, { title: "Responsive Design", desc: "Easily adapt your layout to any screen size." }, { title: "Customizable", desc: "Extend Tailwind with your own design system." }, ] export default function Features() { return ( <section id="features" className="py-20 px-6 bg-gray-50"> <h2 className="text-3xl font-bold text-center mb-12">Features</h2> <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> {features.map((f, i) => ( <div key={i} className="bg-white p-6 rounded-xl shadow hover:shadow-lg transition"> <h3 className="text-xl font-semibold mb-2">{f.title}</h3> <p className="text-gray-600">{f.desc}</p> </div> ))} </div> </section> ) }

const testimonials = [ { name: "Sarah M.", text: "Tailwind changed the way I design. It's fast and intuitive." }, { name: "James K.", text: "I can ship landing pages in hours instead of days." }, ] export default function Testimonials() { return ( <section className="py-20 px-6 text-center"> <h2 className="text-3xl font-bold mb-12">What People Say</h2> <div className="max-w-4xl mx-auto grid md:grid-cols-2 gap-8"> {testimonials.map((t, i) => ( <div key={i} className="bg-gray-100 p-6 rounded-xl shadow"> <p className="italic mb-4">“{t.text}”</p> <h4 className="font-semibold">- {t.name}</h4> </div> ))} </div> </section> ) }

export default function CTA() { return ( <section className="bg-indigo-600 text-white text-center py-20 px-6"> <h2 className="text-3xl md:text-4xl font-bold mb-6"> Ready to Start Building? </h2> <p className="mb-8 max-w-xl mx-auto"> Join thousands of developers who use Tailwind every day to build stunning UIs. </p> <a href="#!" className="bg-white text-indigo-600 px-8 py-3 rounded-lg font-semibold shadow hover:scale-105 transition"> Get Started Free </a> </section> ) }

export default function Footer() { return ( <footer className="bg-gray-900 text-gray-400 py-10 text-center"> <p>© {new Date().getFullYear()} Tailwind Landing. All rights reserved.</p> </footer> ) }