Code Playground - Copy this React, Tailwind Component to your project

Create an interactive code playground that supports writing, running, and testing code in C++, Java, and JavaScript. The UI should have a sleek dark and blue theme, with smooth animations powered by Framer Motion. This playground should be visually engaging, intuitive, and responsive, providing a seamless experience for users to code and see the output in real time. Design & Layout: Editor Section: A code editor panel with tabs for C++, Java, and JavaScript, allowing users to switch between languages seamlessly. Each language tab should highlight the syntax appropriately and allow users to write code. Dark theme with shades of deep blue for the background and light blue/cyan for syntax highlighting. A run button at the bottom or top right corner to compile and execute the code, with hover animations using Framer Motion. Output Section: A console or output panel below the code editor that displays the result of the code execution (output for JS and program output for C++/Java). Dark background with contrasting white or light blue text for easy readability. Animations for when output appears (e.g., fading in smoothly using Framer Motion). Components: CodeEditorTabs: Three tabs: C++, Java, and JavaScript. Use syntax highlighting with a dark and blue themed color palette for each language. Framer Motion for tab transitions (e.g., sliding effect when switching between languages). RunButton: A visually prominent "Run Code" button. Add hover and click animations using Framer Motion, such as glowing, expanding, or rotating effects when hovered or clicked. OutputPanel: A dynamic output panel below the editor that displays the result of the code execution. Smoothly animates the output using Framer Motion when new content is generated (e.g., fading in or sliding in from the side). Animations & Effects: Framer Motion should be used to create fluid transitions between language tabs (e.g., sliding or fading effects). When users hover over buttons or interact with elements (e.g., the run button), use Framer Motion to create subtle hover animations (e.g., scale up, glow, or bounce effects). Editor animations: When a user switches between languages, use a slide or fade animation to smoothly transition between code editor views. Output animations: When the user runs the code, have the output panel smoothly animate the result, with the text fading in or sliding from the bottom. Features & Functionality: Code Compilation & Execution: Enable users to write code in C++, Java, and JavaScript within the editor. Provide a run feature that triggers code execution in the respective language, displaying the output in the output panel. For C++ and Java, simulate server side compilation (could mock the backend for simplicity), while JavaScript can run directly in the browser. Responsive Design: Ensure the code playground is fully responsive, adapting to different screen sizes (desktops, tablets, mobiles). On smaller screens, hide some secondary elements or move them for better UX. Styling: Dark and Blue Theme: Dark background with deep blue tones for the editor, console, and tabs. Syntax highlighting in contrasting colors: light blue, cyan, or green for keywords and operators. Use Tailwind CSS for responsive layout and spacing. Framer Motion Effects: Use motion effects to create a dynamic and interactive user experience, ensuring smooth transitions, hover animations, and engaging interactions.