Form Field Capturer - Copy this Html, Tailwind Component to your project

Prompt for PureCode.AI: Objective: Enhance the UI design of the Form Field Capturer Options page for a Chrome extension. Current Issues: The layout is functional but lacks modern design elements and visual appeal. The page could benefit from better spacing, colors, typography, and interactive components. Desired Improvements: Add a responsive layout to make the page adaptable to different screen sizes. Enhance typography by using modern web fonts and improving font sizing and weights for readability. Update the buttons to use more modern styles with hover effects and proper spacing. Use color schemes that align with current web design trends (e.g., soft background colors with vibrant call to action buttons). Improve table styling, especially for hover and focus states, to make interactive areas more visually distinct. Add icons to buttons where appropriate for better UX (e.g., FontAwesome icons). Introduce card like sections for each area (Captured Fields, Google Sheet Data, Debugging) to visually separate them and make the page more organized. Use subtle shadow effects and rounded corners on sections and buttons for a more modern look. Maintain current functionalities such as capturing fields and showing non empty/modified values but improve the UI around them. Specific Changes: Update the current body and table styles to use a flexbox or grid layout for better alignment and responsiveness. Add rounded corners to buttons, input fields, and table rows for a softer look. Add a hover effect to interactive elements (e.g., buttons, table rows). Improve the appearance of the checkbox filters with custom styles (larger, more visible checkboxes). Adjust form control styling (e.g., for content editable fields) to look more cohesive with the new design. Add tooltips to icons for better guidance (e.g., on hover). Use a light color palette with gentle contrasts (soft background, darker text).