screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, width=device-width" /> <title>My Page</title> <!-- Material-UI CSS --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <!-- React and Material-UI scripts --> <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossorigin="anonymous"></script> <!-- Babel for JSX --> <script src="https://unpkg.com/@babel/standalone@latest/babel.min.js" crossorigin="anonymous"></script> </head> <body> <div id="root"></div> <script type="text/babel"> function App() { return ( <Container maxWidth="md" sx={{ boxShadow: 1, p: 2 }}> <Typography variant="h4" component="h1" gutterBottom> React Material UI Alert Example </Typography> <Stack sx={{ width: '100%' }} spacing={2}> <Alert severity="error"> <AlertTitle>Error</AlertTitle> This is an error alert — <strong>check it out!</strong> </Alert> <Alert severity="warning"> <AlertTitle>Warning</AlertTitle> This is a warning alert — <strong>check it out!</strong> </Alert> <Alert severity="info"> <AlertTitle>Info</AlertTitle> This is an info alert — <strong>check it out!</strong> </Alert> <Alert severity="success"> <AlertTitle>Success</AlertTitle> This is a success alert — <strong>check it out!</strong> </Alert> </Stack> </Container> ); } </script> <script type="text/babel"> const { colors, CssBaseline, ThemeProvider, Typography, Container, createTheme, Stack,Alert,AlertTitle } = MaterialUI; const theme = createTheme({ palette: { primary: { main: '#556cd6', }, secondary: { main: '#19857b', }, error: { main: colors.red.A400, }, }, }); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <ThemeProvider theme={theme}> <CssBaseline /> <App /> </ThemeProvider> ); </script> </body> </html>