Theme - Copy this React, Tailwind Component to your project

Import React from 'react'; import { AppBar, Toolbar, Typography, Button, Card, CardActions, CardContent, CardMedia, Grid, Container, CssBaseline } from '@mui/material'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import ShoppingCartIcon from '@mui/icons material/ShoppingCart'; import HomeIcon from '@mui/icons material/Home'; import CategoryIcon from '@mui/icons material/Category'; import ContactMailIcon from '@mui/icons material/ContactMail'; const theme = createTheme(); const App = () => { return ( <ThemeProvider theme={theme}> <CssBaseline /> <AppBar position="static"> <Toolbar> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> Cửa hàng trực tuyến </Typography> <Button color="inherit" startIcon={<HomeIcon />}>Trang chủ</Button> <Button color="inherit" startIcon={<CategoryIcon />}>Sản phẩm</Button> <Button color="inherit" startIcon={<ShoppingCartIcon />}>Giỏ hàng</Button> <Button color="inherit" startIcon={<ContactMailIcon />}>Liên hệ</Button> </Toolbar> </AppBar> <main> <Container sx={{ py: 8 }} maxWidth="lg"> <Typography variant="h4" component="h1" gutterBottom> Sản phẩm nổi bật </Typography> <Grid container spacing={4}> {[1, 2, 3, 4].map((item) => ( <Grid item key={item} xs={12} sm={6} md={3}> <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}> <CardMedia component="img" sx={{ height: 200 }} image={`/api/placeholder/200/200`} alt={`Sản phẩm ${item}`} /> <CardContent sx={{ flexGrow: 1 }}> <Typography gutterBottom variant="h5" component="h2"> Sản phẩm {item} </Typography> <Typography> Giá: {item}00.000đ </Typography> </CardContent> <CardActions> <Button size="small" startIcon={<ShoppingCartIcon />}>Thêm vào giỏ hàng</Button> </CardActions> </Card> </Grid> ))} </Grid> </Container> </main> <footer style={{ marginTop: 'auto', backgroundColor: theme.palette.background.paper, padding: theme.spacing(6) }}> <Typography variant="body2" color="text.secondary" align="center"> © 2024 Cửa hàng trực tuyến. Tất cả các quyền được bảo lưu. </Typography> </footer> </ThemeProvider> ); }; export default App;