<Flex
  w="full"
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={50}
  shadow="md"
  alignItems="center"
  justifyContent="center"
>
  <Flex
    maxW="sm"
    w="full"
    mx="auto"
    bg="white"
    _dark={{
      bg: "gray.800",
    }}
    rounded="lg"
    overflow="hidden"
  >
    <Flex justifyContent="center" alignItems="center" w={12} bg="green.500">
      <Icon as={IoMdCheckmarkCircle} color="white" boxSize={6} />
    </Flex>

    <Box mx={-3} py={2} px={4}>
      <Box mx={3}>
        <chakra.span
          color="green.500"
          _dark={{
            color: "green.400",
          }}
          fontWeight="bold"
        >
          Success
        </chakra.span>
        <chakra.p
          color="gray.600"
          _dark={{
            color: "gray.200",
          }}
          fontSize="sm"
        >
          Your account was registered!
        </chakra.p>
      </Box>
    </Box>
  </Flex>
</Flex>;

<Flex
  w="full"
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={50}
  alignItems="center"
  justifyContent="center"
>
  <Flex
    maxW="sm"
    w="full"
    mx="auto"
    bg="white"
    _dark={{
      bg: "gray.800",
    }}
    shadow="md"
    rounded="lg"
    overflow="hidden"
  >
    <Flex justifyContent="center" alignItems="center" w={12} bg="blue.500">
      <Icon as={IoMdAlert} color="white" boxSize={6} />
    </Flex>

    <Box mx={-3} py={2} px={4}>
      <Box mx={3}>
        <chakra.span
          color="blue.500"
          _dark={{
            color: "blue.400",
          }}
          fontWeight="bold"
        >
          Info
        </chakra.span>
        <chakra.p
          color="gray.600"
          _dark={{
            color: "gray.200",
          }}
          fontSize="sm"
        >
          This channel archived by the owner!{" "}
        </chakra.p>
      </Box>
    </Box>
  </Flex>
</Flex>;

<Flex
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={50}
  w="full"
  alignItems="center"
  justifyContent="center"
>
  <Flex
    maxW="sm"
    w="full"
    mx="auto"
    bg="white"
    _dark={{
      bg: "gray.800",
    }}
    shadow="md"
    rounded="lg"
    overflow="hidden"
  >
    <Flex justifyContent="center" alignItems="center" w={12} bg="yellow.500">
      <Icon as={IoMdAlert} color="white" boxSize={6} />
    </Flex>

    <Box mx={-3} py={2} px={4}>
      <Box mx={3}>
        <chakra.span
          color="yellow.400"
          _dark={{
            color: "yellow.300",
          }}
          fontWeight="bold"
        >
          Warning
        </chakra.span>
        <chakra.p
          color="gray.600"
          _dark={{
            color: "gray.200",
          }}
          fontSize="sm"
        >
          Your image size is too large!
        </chakra.p>
      </Box>
    </Box>
  </Flex>
</Flex>;

<Flex
  w="full"
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={50}
  alignItems="center"
  justifyContent="center"
>
  <Flex
    maxW="sm"
    w="full"
    mx="auto"
    bg="white"
    _dark={{
      bg: "gray.800",
    }}
    shadow="md"
    rounded="lg"
    overflow="hidden"
  >
    <Flex justifyContent="center" alignItems="center" w={12} bg="red.500">
      <Icon as={BsLightningFill} color="white" boxSize={6} />
    </Flex>

    <Box mx={-3} py={2} px={4}>
      <Box mx={3}>
        <chakra.span
          color="red.500"
          _dark={{
            color: "red.400",
          }}
          fontWeight="bold"
        >
          Error
        </chakra.span>
        <chakra.p
          color="gray.600"
          _dark={{
            color: "gray.200",
          }}
          fontSize="sm"
        >
          Your email is already used!
        </chakra.p>
      </Box>
    </Box>
  </Flex>
</Flex>;

<Flex
  w="full"
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={50}
  alignItems="center"
  justifyContent="center"
>
  {" "}
  <Flex
    maxW="sm"
    w="full"
    mx="auto"
    bg="white"
    _dark={{
      bg: "gray.800",
    }}
    shadow="md"
    rounded="lg"
    overflow="hidden"
  >
    <Flex
      w={2}
      bg="gray.800"
      _dark={{
        bg: "gray.900",
      }}
    ></Flex>

    <Flex alignItems="center" px={2} py={3}>
      <Avatar
        boxSize={10}
        name="Dan Abrahmov"
        src="https://bit.ly/dan-abramov"
      />
      <Box mx={3}>
        <chakra.p
          color="gray.600"
          _dark={{
            color: "gray.200",
          }}
        >
          Dan has replied on the{" "}
          <Link
            color="blue.500"
            _dark={{
              color: "blue.300",
            }}
            _hover={{
              color: "blue.400",
              textDecor: "underline",
            }}
          >
            uploaded image
          </Link>
          .
        </chakra.p>
      </Box>
    </Flex>
  </Flex>
</Flex>;