import { Button, TextField, Box, Typography } from '@mui/material';

function LoginForm() {
  return (
    <Box sx={{ maxWidth: 400, mx: 'auto', p: 3 }}>
      <Typography variant="h4" gutterBottom>
        Welcome Back
      </Typography>
      <TextField
        fullWidth
        label="Email"
        margin="normal"
      />
      <TextField
        fullWidth
        label="Password"
        type="password"
        margin="normal"
      />
      <Button
        variant="contained"
        fullWidth
        sx={{ mt: 2 }}
      >
        Sign In
      </Button>
    </Box>
  );
}

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#2196f3',
    },
    secondary: {
      main: '#f50057',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* Your app components */}
    </ThemeProvider>
  );
}

import { Grid, Card } from '@mui/material';

function ResponsiveGrid() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6} md={4}>
        <Card>Content</Card>
      </Grid>
      {/* Add more grid items */}
    </Grid>
  );
}