Material ui glassomorphism cards

To get the of material-ui let’s try to make 10 different types of cards

1. Basic Card

import React from "react";
import { makeStyles } from "@material-ui/core/";
import { Card, CardContent, Typography } from "@material-ui/core/";
const useStyles = makeStyles({
  root: {
    minWidth: 275,
    backgroundColor: "rgba(255,255,255,0.4)",
    backgroundImage:
      "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)",
    backdropFilter: "blur(40)px",
    boxShadow: "10px 10px 10px rgba(30,30,30,.1)",
    borderRadius: 10
  }
});
export default function BasicCard() {
  const classes = useStyles();
return (
    <Card className={classes.root}>
      <CardContent>
        <Typography color="textSecondary" gutterBottom>
          Word of the Day
        </Typography>
        <Typography variant="h2" component="h2" gutterBottom>
          Hello
        </Typography>
<Typography variant="subtitle1" component="p">
          React components for faster and easier web development. Build your own
          design system, or start with Material Design.
        </Typography>
      </CardContent>
    </Card>
  );
}