Website Compliance Checker - Copy this React, Tailwind Component to your project
Design a React component for a Website Compliance Checker SaaS application that focuses on accessibility and SEO compliance. The design should be stylish, clean, and elegant, conveying professionalism and trust. The component should be a dashboard section that allows users to input a website URL and view a compliance score for both accessibility and SEO. Component requirements: Use a card layout with subtle shadows and rounded corners. Include sections to display Accessibility Score and SEO Score with circular progress indicators or a stylish bar indicator. Display a short list of issues found, with icons or indicators showing the severity level (e.g., critical, warning, suggestion). Provide an analyze button styled to stand out but maintain elegance (rounded corners, soft shadows, slight gradient). Use minimalist fonts like Poppins or Roboto for headings and body text. Ensure space for tooltips or info icons that explain each metric. Additional Design Details: Add a small footer below the main card to encourage users to “View Full Report” or “Upgrade for In Depth Analysis.” Incorporate subtle animations for the scores loading and when hovering over issue list items for a more dynamic user experience.
