Pricing Plans - Copy this React, Tailwind Component to your project

Design the Pricing Plans section of the School Management Software SaaS landing page with an interactive tabbed layout. The section should feature tabs at the top to allow users to switch between different types of schools (e.g., 'Small Schools', 'Medium Schools', 'Large Schools'). Each tab should display customized pricing plans based on the selected school size. Under each tab, display three pricing tiers in a clean, card format: Plan Name (e.g., Basic, Pro, Enterprise) Price (e.g., '$49/month', '$99/month', 'Contact for Enterprise pricing') A brief description (e.g., 'Best for small schools' or 'Perfect for large institutions'). A list of key features with icons for each plan, showcasing tools such as attendance tracking, gradebook management, and communication tools. A clear call to action button for each plan labeled 'Start Free Trial' or 'Get Started.' Highlight the most popular plan by making the card larger or using a different background color. Add hover effects to the cards for interactivity, such as subtle shadow or color changes when the user hovers over them. At the top right of the section, include a toggle for users to switch between Monthly and Annual billing, with annual pricing offering a discount (e.g., 'Save 20% with annual billing'). This should be consistent across all tabs. Below the pricing cards, add a FAQ dropdown section to address common customer questions, like: 'What happens after the free trial?' 'Can I change my plan later?' 'Is there a setup fee?' At the bottom of the section, include a secondary call to action such as 'Compare All Features' or 'Contact Us for a Custom Plan'. The overall design should be modern, with smooth tab transitions, and the section should maintain a professional, easy to navigate layout.