Code Editor - 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: React Code Editor: The code editor should allow users to edit or write React code, with features like syntax highlighting and real time updates. Use a reliable editor library like Monaco Editor or any similar library that can replicate the visual style and functionality shown in the image. 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. Ensure that any necessary isolation (like using an iframe) is implemented so that the editor and the preview do not interfere with each other. File Navigation: 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. Properties & Console Panels: Add placeholder sections for "Properties" and "Console" that will show relevant information. These sections can remain static placeholders but should match the layout and style in the image. Style: Ensure the code editor and the live preview are displayed side by side in a responsive and clean layout. Use CSS to make sure the editor pane is on the left, and the live preview is on the right. The style of the React logo, the "Learn React" link, and the text in the live preview should match what is shown in the attached image. Rendering and Error Handling: Handle any potential code errors gracefully so the preview doesn’t break when invalid code is entered. Please return the complete React code (both the JSX and the CSS) that exactly implements all these features and layout requirements. Ensure that all the details match the image provided.