Split- Screen Editor - Copy this Html, Tailwind Component to your project
Design a sophisticated split screen webpage featuring a sleek code editor on one side and a live website preview on the other. Incorporate a refined toggle button to switch between a light and dark theme, ensuring a modern and user friendly experience. Layout Specifications: Overall Structure: Use a <div> container to create a clean split screen layout. Left Section (Code Editor): Width: 50% of the viewport. Background: Light gray for light mode (#F5F5F5) / Dark gray for dark mode (#1E1E1E). Font: Monospace (e.g., 'Fira Code', 'Courier New'), size: 16px. Padding: 20px. Border right: 1px solid #ddd for subtle separation. Right Section (Live Preview): Width: 50% of the viewport. Background: White for light mode (#FFFFFF) / Deep black for dark mode (#000000). Padding: 20px. Box shadow: 0 4px 15px rgba(0, 0, 0, 0.1) to create depth. Theme Toggle Button: Position: Fixed at the top center of the page. Style: Elegant, rounded button with a soft gradient background. Font: Sans serif, bold. Hover Effect: Slight increase in size and shadow effect for interactivity. Animation: Smooth transition when toggling between themes. Color Theme Details: Light Mode: Background: #FFFFFF Text Color: #333333 Code Editor Background: #F5F5F5 Code Text Color: #2D2D2D Button Background: #007BFF Button Text Color: #FFFFFF Dark Mode: Background: #000000 Text Color: #FFFFFF Code Editor Background: #1E1E1E Code Text Color: #D4D4D4 Button Background: #007BFF Button Text Color: #FFFFFF Additional Design Elements: Typography: Headings: Use a modern, sans serif font (e.g., 'Roboto', 'Montserrat') with a larger size for clarity. Ensure high contrast between text and background for readability. Borders and Shadows: Apply a subtle border radius (5px) to sections and buttons for a polished look. Use soft shadows to enhance separation and depth without overwhelming the design. Responsive Design: Ensure the layout adjusts gracefully on smaller screens, possibly stacking sections vertically with a toggle button above.
