Music Player

Result
<Box css={{
  width: 300,
  border: '1px solid $neutral200',
  borderRadius: '$2xl',
  boxShadow: '$sm',
  backgroundColor: '$white900',
}}>
  <Box
    css={{
      height: 140,
      backgroundColor: '#463225',
      backgroundImage: 'url("https://www.pluggedin.com/wp-content/uploads/2020/01/wake-me-up-avicii-review-image.jpg")',
      borderRadius: '$2xl',
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0,
      backgroundSize: 'cover',
      position: 'relative'
    }}
  >
    <Button
      size="lg"
      css={{
        position: 'absolute',
        right: 10,
        bottom: -20,
        boxShadow: 'violet 0px 0px 20px 2px',
        padding: 10,
        borderRadius: '100%',
        width: '$10',
        zIndex:'2',
        svg: {
          display: 'block',
          marginRight: '-$2'
        }
      }}
    ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff"><path d="M7 6v12l10-6z"></path></svg></Button>
  </Box>
  
  <Box
    css={{
      padding: '$4 $8',
      position: 'relative'
    }}
  >
    <Heading size="h6" css={{
      lineHeight: 1,
      marginBottom: '4px !important',
      lineHeight: 1,
      marginTop: '$4',
    }}> Wake Me Up </Heading>

    <Text css={{ color: '$neutral600', marginBottom: '$8' }}> Song by Avicci </Text>

    <Box>
      <Text>Feeling my way through the darkness </Text>
      <Text>Guided by a beating heart</Text>
      <Text>I can't tell where the journey will end</Text>
      <Text>But I know where to start ...</Text>

      <Box
        css={{
          position: 'absolute',
          left: 0,
          width: '100%',
          height: 50,
          bottom: 0,
          borderRadius: '$2xl',
          opacity: 0.5,
          backgroundImage: 'linear-gradient(to bottom, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff);',
        }} />
    </Box>
  </Box>
</Box>