Categories - Copy this React, Tailwind Component to your project

Here's a detailed task list instructing your AI to generate clear job listings with examples, including a fully responsive detailed job view when clicked: 🎯 Task 1: Job Listing Examples (Overview Page) Clearly list these 6 example jobs in a responsive card format: Plumbing Emergency Location: Toronto, ON Budget: $150-$250 Brief: "Fix leaking sink and bathroom pipe urgently." Graphic Designer for Logo Creation Location: Remote Budget: $200 Brief: "Need a modern logo for a new startup." Chef for Private Dinner Event Location: Vancouver, BC Budget: $400-$500 Brief: "Prepare a three-course Mediterranean dinner for 6 guests." Web Developer Needed for Ecommerce Site Location: Remote Budget: $800-$1200 Brief: "Build and deploy an ecommerce website with secure payments." Home Cleaning Services Location: Ottawa, ON Budget: $100-$150 Brief: "General cleaning of a 2-bedroom apartment." Online Math Tutor Location: Remote Budget: $30/hour Brief: "Provide weekly online math tutoring sessions." Responsive layout clearly adjusts for desktop (3 per row), tablet (2 per row), mobile (1 per row). Each card clearly displays the job title, location, budget, and brief summary. Include clear "View Job" button on each card. 🎯 Task 2: Detailed Job View Page (When Job is Clicked) Clearly display the following information on each detailed job view: Job Title: Clearly displayed at the top (large font). Detailed Description: Expanded job details provided clearly and neatly. Budget and Payment Terms: Clearly visible. Location: Clearly specified. Posted Date: Clearly displayed. Client Details: Name (anonymous option), verified status clearly indicated. Skills Required: Clearly listed with tags or icons. Proposal Submission: Clearly visible form/button for freelancers to submit their proposals. 🎯 Task 3: Responsive Design Ensure all job cards and detailed views are fully responsive. Clearly optimize layouts for readability and usability on desktop, tablet, and mobile devices.