<p className='text-4xl md:text-7xl text-center'>
    Join my{' '}
    <span className='overflow-hidden border-r-purple-700 border-r-8 whitespace-nowrap mx-auto inline-block align-bottom'
          style={{ animation: 'typing 10s steps(40, end) 10s infinite alternate, blink .5s step-end infinite',
                    width: '9ch', display: 'inline-block', animationFillMode: 'forwards' }}>
      <span className='bg-purple-700 text-white px-2 py-1'>
        non-linear
      </span>
    </span>
    <style jsx>{`
      @keyframes typing {
        0% { width: 0; }
        50% { width: 8.5ch; }
        100% { width: 8.5ch; }
      }
      @keyframes blink {
        from, to { border-color: transparent }
        50% { border-color: #6c2bd9 }
      }
    `}</style>
  </p>