Needing a Tip Box Block

Hello Sir,
I needed a Tip Box Block. Something like this– https://prntscr.com/15eti34

It is to be used as a Tip Block as seen here, when you continue to scroll down the Page (https://www.chelseasmessyapron.com/smores-energy-bites/)

And when I asked it from some of my Facebook Groups, someone from one of my Facebook Groups created it for me and gave me this link to it–(https://codepen.io/Pulmunen/pen/QWprzRz?fbclid=IwAR1PGOEZOhUjYnOxSxEG3qbjalJ1atiWKITiH9pSryML1rDXsmO1Kxmer2g)

How do I get that thing into Gutenberg, and make it a Reusable Block called “Tip Block” ?

Regards.