Cart Item - Copy this React, Tailwind Component to your project

<Card sx={{ mb: 2, p: 2 }}> <Grid container spacing={2}> {/* Product Image */} <Grid item xs={2}> <Avatar variant="square" src={item?.product?.imageUrl} alt={item?.product?.name} sx={{ width: 80, height: 80 }} /> </Grid> {/* Product Details */} <Grid item xs={6}> <Typography variant="subtitle1">{item?.product?.name}</Typography> {/* <Typography variant="body2" color="text.secondary"> Seller: ABC Corp </Typography> */} {/* Price Details */} <Typography variant="body1" sx={{ fontWeight: "bold" }}> ₹{item?.product?.price}{" "} <Typography variant="body2" component="span" color="text.secondary" sx={{ textDecoration: "line through" }} > ₹{1200} </Typography>{" "} {50}% Off </Typography> <Typography variant="body2" color="green"> 1 offer applied </Typography> </Grid> {/* Quantity and Actions */} {/* Save for Later and Remove */} <Grid item xs={2} display="flex" flexDirection="column" alignItems="flex end" > <Grid container> <Typography variant="body2" color="text.secondary"> Delivery by 10/09/2024 | Free </Typography> </Grid> </Grid> </Grid> {/* Delivery Info */} <Grid item xs={12} display="flex" alignItems="center"> <Box sx={{ display: "flex", alignItems: "center" }}> <IconButton> <RemoveIcon /> </IconButton> <Typography variant="body1">{item?.product?.stock}</Typography> <IconButton> <AddIcon /> </IconButton> </Box> <Button variant="text" color="primary"> Save for Later </Button> <Button variant="text" color="primary"> Remove </Button> </Grid> </Card> modifry this code to have photo and increment decrement item in one column aligned , in second all texts and buttons in one column aligned and delivery by section in one line at the end of row