Code Editor With Preview - Copy this React, Tailwind Component to your project

I need a precise code implementation for a React based code editor that includes a live preview feature, exactly like the one displayed in the attached image. Please ensure the following requirements are met: 1. React Code Editor with Syntax Highlighting: The code editor should allow users to edit or write React code and support syntax highlighting, especially for JSX, JavaScript, and React specific syntax. Use a reliable editor library like Monaco Editor, CodeMirror, or a similar library that supports this level of syntax highlighting. Ensure that the syntax highlighting is dynamic and adjusts based on the type of code being written. 2. Live Preview: As the code is being written or updated in the editor, it should immediately reflect those changes in a live preview pane. The live preview should dynamically render the React components entered into the editor in real time. Ensure that any necessary isolation (like using an iframe) is implemented so that the editor and the preview do not interfere with each other. 3. File Navigation and Responsive UI: Include a simple file navigation or menu section with tabs for: Preview Properties Console Configuration Ensure that the preview tab is visually emphasized when active, just like in the image. 4. Adjustable and Responsive Layout: The layout should consist of three primary columns: File Navigation (on the left), Code Editor (center), and Live Preview (right). Each column should be fully responsive and include a drag to adjust feature. Users should be able to drag the borders between the columns to dynamically adjust the width of the file nav, code editor, and live preview sections. Implement this feature to work smoothly across both desktop and mobile layouts, ensuring it remains responsive and intuitive. 5. Properties & Console Panels: Add placeholder sections for "Properties" and "Console" that will show relevant information. These sections can remain static placeholders for now but should match the layout and style in the image. Ensure these panels are visible in the correct tab, similar to the image. 6. File Uploader with Multi File Support: Add a file uploader component that supports multiple file types (e.g., .jsx, .js, .css, .html, .json). The file uploader should allow users to upload and view multiple files in the editor, switching between them as needed. Ensure that the uploaded files are properly categorized and can be previewed within the code editor.