import React from 'react'; import './IPhoneSimulator.css'; const IPhoneSimulator = ({ children }) => { return (

{children}

); }; export default IPhoneSimulator; .iphone { position: relative; width: 375px; height: 812px; background: #111; border-radius: 60px; padding: 20px; box-sizing: border-box; box-shadow: 0 0 0 14px #111, 0 0 50px rgba(0, 0, 0, 0.5); margin: 50px auto; } .iphone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 180px; height: 30px; background: #111; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; z-index: 10; } .iphone-screen { width: 100%; height: 100%; background: white; border-radius: 40px; overflow: hidden; position: relative; } .iphone-home-button { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 120px; height: 5px; background: #333; border-radius: 5px; } import React from 'react'; import IPhoneSimulator from './components/IPhoneSimulator'; import './App.css'; function App() { return (

iPhone Simulator

This is a web-based iPhone simulator

); } export default App; .app { text-align: center; padding: 20px; background: #f5f5f5; min-height: 100vh; } .iphone-content { padding: 20px; text-align: center; color: #333; } .iphone-content h1 { margin-top: 50px; font-size: 24px; } .iphone-content p { font-size: 16px; color: #666; } import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }