People Management - Copy this React, Tailwind Component to your project

"Design a responsive and clean table interface for a 'People' management page with the following features: Header Section: Title: 'People' with a total count displayed ('2 Total') on the right. Tab bar below the title with the active tab highlighted ('Overview'). Search and Filters: A search bar for filtering results by keyword. Three dropdown filters: 'Schools' 'Positions' 'Processes' A sorting dropdown aligned to the right, defaulted to 'Name (A → Z).' Action Buttons: A button labeled 'Import People' with a subtle background color. A green button labeled 'Add Person' next to it. Table Rows: Display the following details for each person: Name: 'Smith, Brett' and 'Teacher, Demo' as examples. Role: 'Administrator' or 'Teacher' in blue, clickable links. School: 'Test School' displayed after the role. Additional Metrics for Each Row: For Smith, Brett: A label titled 'Observations' with the number '5' displayed below it. A label titled 'Instructional Walks' with the number '10' displayed below it. For Teacher, Demo: A label titled 'Observations' with the number '5' displayed below it. A label titled 'Instructional Walks' with the number '10' displayed below it. Pagination: Display pagination controls at the bottom of the table: 'Previous' and 'Next' buttons with the current page number ('1') highlighted. Ensure the table rows and metrics have enough spacing and visual hierarchy for clarity. Use light background colors and subtle borders for each row, with prominent colors (e.g., green for 'Add Person') for interactive elements. The layout should prioritize readability and usability."