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

The UI begins with a centered title at the top of the page that reads **“Form Field Capturer Options”**, styled in bold. Beneath the title, the layout is divided into two main sections that are presented side by side. These sections are wrapped inside a flexbox layout, which ensures they align horizontally and maintain consistent spacing. The **left section** is labeled **“Captured Fields”**, which is accompanied by two clickable icons: a printer icon for printing the captured fields and a code icon to display the related code. Directly below the heading, there are two checkboxes that allow users to filter the data: one labeled **Show only non empty values**, and the other labeled **Show only modified fields**. Both checkboxes are checked by default. Following the checkboxes is a table containing six columns. The columns are labeled **Type**, **Name**, **Value**, **Site**, **Mode**, and **Matching**. The **Type** column lists the type of data captured, such as “Text” or “Email”. The **Name** column specifies the data field (e.g., Full Name, Email Address), while the **Value** column displays the actual captured information (e.g., “John Doe”, “john.doe@email.com”). The **Site** column provides the source of the data (e.g., example.com). The **Mode** column indicates how the data was captured (e.g., “Capture”), and the **Matching** column shows the matching strategy (e.g., “Exact” or “Fuzzy”). At the bottom of the **Captured Fields** section, there are three buttons placed horizontally in a row: **Save Form**, **Save as Default Captured Fields**, and **Load Table Settings**. These buttons allow users to interact with the captured data by saving or loading settings. The **right section** is titled **“Google Sheet Data (Transposed)”** and features a table with three columns labeled **Full Name**, **Email Address**, and **Phone Number**. The table is populated with sample data, such as “Jane Smith,” “jane.smith@email.com,” and “+60198765432” in the first row, and “Ahmad bin Abdullah,” “ahmad.abdullah@email.com,” and “+60167890123” in the second row. At the bottom of this section, there is a single button labeled **Refresh Google Sheet Data**, which is positioned to the right. Below these two main sections is a separate **Debugging** section, which is presented as a full width block. The section is titled **“Debugging”** and contains two horizontally aligned buttons: **Clear Chrome Storage** and **Display Chrome Storage Data**. These buttons provide debugging tools for the user to clear or display stored data. The layout is clean and organized, utilizing clear table structures for data presentation and buttons for user interaction. Each section is distinctly separated by its title and includes appropriate icons and controls for managing data. overall i need the page to be modern and elegant for healthcare industry, add simple gradient to the background.