Recipe

Result
<Box 
  css={{
    backgroundImage: 'linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url("https://images.unsplash.com/photo-1563379926898-05f4575a45d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1470&q=80")',
    width: 300,
    height: 300,
    backgroundSize: 'cover',
    borderRadius: '$xl',
    position: 'relative'
  }}
>
  <Box css={{
    position: 'absolute',
    bottom: 0,
    left: 0,
    padding: '$8',
  }}
  >
    <Heading 
      size="h3" 
      css={{ 
        marginBottom: 0, 
        color: '$white900' 
      }}
    > 
      Seafood Pasta 
    </Heading>
    
    <Text css={{ 
        color: '$white800', 
        marginBottom: '$2' 
      }}
    > Recipe by John Doe </Text>

    <Flex gap='$4'>
      <Chip color="warning"> #Seafood </Chip>
      <Chip color="warning"> #Pasta </Chip>
    </Flex>

  </Box>
</Box>