How to make a product-tour for a web site with React and Tailwind CSS.

After figuring out different approaches to making various a product-tour on a web-site, I have decided to create a simplified version with React and Tailwind CSS. Here is the final code with a few adjustments.

MainPage.jsx

import { useState } from "react";
import Hint from "./components/Hint";

export default function MainPage() {
  const [showHints, setShowHints] = useState(false);

  return (
    <main className="flex min-h-screen flex-col items-center justify-center gap-5 bg-radial from-blue-600 from-20% to-blue-950 p-4 text-gray-300">
      <button
        onClick={()=> setShowHints((prev)=> !prev)}
        className="z-50 min-w-26 cursor-pointer border-3 border-blue-950 bg-blue-800 p-1 text-xs font-bold text-gray-100 uppercase hover:bg-gray-100 hover:text-blue-950"
      >
        {showHints ? "Hide hints" : "Show hints"}
      </button>
      <section className="relative space-y-2">
        {showHints && <Hint text="Title is shown here." />}
        <h2 className="w-full max-w-2xl border-3 bg-blue-950 p-1 text-center text-2xl font-bold">
          Title
        </h2>
        <article className="relative">
          {showHints && <Hint text="Text is shown here." />}
          <p className="w-full max-w-2xl border-3 bg-blue-950 p-4">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores,
            atque, pariatur blanditiis distinctio quam cum minus soluta ea,
            possimus eaque neque perferendis fugiat accusamus assumenda
            voluptatibus molestias corrupti natus hic dolor a in quasi?
            Cupiditate totam iste illo hic ut asperiores laudantium molestias
            sequi nesciunt, a voluptatem, cumque repellat magni harum tempore,
            fuga pariatur. Totam, est nam ullam beatae praesentium sed possimus
            incidunt quo perspiciatis earum. Quisquam doloribus inventore, nobis
            eos tenetur non tempora consequuntur rerum hic at perspiciatis nemo
            reiciendis, alias unde cupiditate modi totam quibusdam recusandae
            est quidem molestiae laudantium a ipsam excepturi. Reprehenderit
            voluptas unde temporibus modi!
          </p>
        </article>
      </section>
      {/* Darkening effect for the page */}
      {showHints && (
        <div
          onClick={()=> setShowHints(false)}
          className="pointer-events-auto fixed inset-0 z-40 bg-black/40"
          aria-hidden="true"
        />
      )}
    </main>
  );
}

Hint.jsx

export default function Hint({ text }) {
  return (
    <aside className="absolute -top-5 z-50 mx-2 w-full max-w-[200px] text-center">
      <p className="border-3 border-blue-950 bg-gray-100 px-2 py-1 text-xs text-blue-950">
        {text}
      </p>
      <div className="mx-auto h-0 w-0 border-t-10 border-r-10 border-l-10 border-t-blue-950 border-r-transparent border-l-transparent" />
    </aside>
  );
}

Live version

Styling has been slightly modified to match the design of the current site.

Thank you for reading.