JSFiddle - React, Tailwind, and code Playground

HTML

<div class="intro">
        <h2> <span class="hello"> Hello! </span> Nice to meet you!</h2>
        <h2>My name is <span class="my-name"> JOHN </span>.</h2>
        <h2>I am a <span class=dev> developer
          </span> living <span class="country"> CANADA </span>.
        </h2>
      </div>

CSS

.intro {
  padding: 10px;
  width:70%;;
  margin-left:10%;
  padding-top:40px;
    position:relative;
  padding-bottom: 50px;
}

.intro h2 {
  margin:0;
  color: #333;
  text-transform:uppercase;
  font-size: 10vw;

}

.intro h2 span {
  text-shadow: 1px 1px 1px rgba(0,255,0,1);
}

.hello:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

.my-name:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

.country:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

.dev:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}