React material Ui Alert Example

<!DOCTYPE html>
<html lang="en">

<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 Outlined UI Alert Example
                    </Typography>
                    <Stack sx={{ width: '100%' }} spacing={2}>
                        <Alert severity="error" variant='outlined'>
                            <AlertTitle>Error</AlertTitle>
                            This is an outlined error alert — <strong>check it out!</strong>
                        </Alert>
                        <Alert severity="warning" variant='outlined'>
                            <AlertTitle>Warning</AlertTitle>
                            This is a outlined warning alert — <strong>check it out!</strong>
                        </Alert>
                        <Alert severity="info" variant='outlined'>
                            <AlertTitle>Info</AlertTitle>
                            This is an outlined info alert — <strong>check it out!</strong>
                        </Alert>
                        <Alert severity="success" variant='outlined'>
                            <AlertTitle>Success</AlertTitle>
                            This is a outlined 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>