P D F Section Customizer - Copy this React, Tailwind Component to your project

Create a user interface for customizing PDF sections within IBM Business Automation Workflow (BAW). The UI should be designed to allow users to easily edit HTML content stored in a database, which is used to generate PDFs. The interface should be intuitive, efficient, and optimized for performance within the BAW environment. Key features of the UI: Section Navigation: Display a list or menu of all available PDF sections (e.g., Header, Body, Footer, etc.). Allow users to quickly switch between sections. Highlight the currently active section. Editing Area: Provide a large, central area for editing the HTML content of each section. Implement rich text editing capabilities, allowing users to format text, add lists, tables, etc. Show a live preview of the formatted content if possible. Toolbar: Include formatting options like bold, italic, underline, alignment, etc. Provide options to insert common elements like headings, lists, tables, and images. Include undo/redo functionality. Variable Insertion: Offer a way to insert dynamic variables (e.g., customer name, date) into the content. This could be a dropdown menu or a special syntax highlighted in the editor. Save and Preview: Include prominent "Save" and "Preview" buttons. The "Save" button should update the database with the edited content. The "Preview" button should generate a sample PDF with the current content. Version History: If possible, maintain a history of changes and allow users to revert to previous versions. Responsive Design: Ensure the UI works well on different screen sizes, as BAW might be accessed from various devices. Performance Optimization: Implement efficient loading of section content, perhaps using lazy loading for inactive sections. Consider auto saving to prevent data loss without overloading the system. User Feedback: Provide clear feedback for user actions (e.g., saving, loading, errors). Include loading indicators for any operations that might take time. Accessibility: Ensure the UI is accessible, with proper labeling and keyboard navigation. Help and Guidance: Include tooltips or a help section explaining how to use the editor and any special features. Design Considerations: Use a clean, professional layout consistent with BAW's overall design. Prioritize ease of use for non technical users who may be editing the PDF templates. Ensure all functions are clearly labeled and easy to find. Use color and iconography effectively to guide users through the interface. Technical Constraints: The UI must be implementable within the BAW environment. It should work with the existing database structure for storing HTML content. Consider any limitations of BAW's rich text editing capabilities. The goal is to create a UI that allows users to efficiently customize PDF templates without requiring extensive HTML knowledge, while ensuring the resulting PDFs maintain a consistent and professional appearance.