Main Menu Grid - Copy this React, Tailwind Component to your project

<Grid container spacing={4}> {mainMenu.length > 0 && mainMenu[0].children && mainMenu[0].children.length > 0 && mainMenu[0].children[0].children && mainMenu[0].children[0].children.map((row) => ( <Grid item xs={12} sm={6} md={4} key={row.mainid}> <StyledCard> <CardContent> <div style={{ display: 'flex', justifyContent: 'space between', alignItems: 'center' }}> <Typography variant="h6" color="text.secondary"> ID: {row.mainid} </Typography> <Checkbox checked={selectedRows.includes(row.mainid)} onChange={() => handleSelectRow(row.mainid)} color="primary" sx={{ "& .MuiSvgIcon root": { "& path": { fill: "rgba(34, 193, 195, 0.9)", }, }, "&.Mui checked .MuiSvgIcon root": { "& path": { fill: "green", }, }, }} /> </div> <Typography variant="h6" component="div" gutterBottom> Page Name: {row.title} </Typography> <Typography variant="h6" component="div" gutterBottom> Page URL: {row.pageUrl} </Typography> </CardContent> </StyledCard> </Grid> ))} </Grid> use this do a design of card