JSFiddle - React, Tailwind, and code Playground

HTML

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/shepherd.js@13.0.0/dist/esm/shepherd.mjs"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/shepherd.js@13.0.0/dist/css/shepherd.css"
/>

JavaScript

const tour = new Shepherd.Tour({
		defaultStepOptions: {
			cancelIcon: {
				enabled: true
			},
			classes: 'class-1 class-2',
			scrollTo: { behavior: 'smooth', block: 'center' }
		}
	});

	tour.addStep({
		title: 'Creating a Shepherd Tour',
		text: 'Creating a Shepherd tour is easy. too! Just create a "Tour" instance, and add as many steps as you want.',
		attachTo: {
			element: '.hero-example',
			on: 'bottom'
		},
		buttons: [
			{
				action() {
					return this.back();
				},
				classes: 'shepherd-button-secondary',
				text: 'Back'
			},
			{
				action() {
					return this.next();
				},
				text: 'Next'
			}
		],
		id: 'creating'
	});

	tour.start();