content: import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import Avatar from '@material-ui/core/Avatar';
  import { deepOrange, deepPurple } from '@material-ui/core/colors';
  import Grid from '@material-ui/core/Grid';
  
  const useStyles = makeStyles({
    avatar: {
      margin: 10,
    },
    orangeAvatar: {
      margin: 10,
      color: '#fff',
      backgroundColor: deepOrange[500],
    },
    purpleAvatar: {
      margin: 10,
      color: '#fff',
      backgroundColor: deepPurple[500],
    },
  });
  
  export default function LetterAvatars() {
    const classes = useStyles();
  
    return (
      <Grid container justify="center" alignItems="center">
        <Avatar className={classes.avatar}>H</Avatar>
        <Avatar className={classes.orangeAvatar}>N</Avatar>
        <Avatar className={classes.purpleAvatar}>OP</Avatar>
      </Grid>
    );
  }
  