Variation of McHaXYT's tooltip

export default function Component() {
  return (
    <div className="relative flex justify-center group">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 512 512"
    className="w-16 h-16 cursor-pointer animate-sway-float drop-shadow-[0_0_8px_rgba(241,89,42,0.6)] group-hover:drop-shadow-[0_0_20px_rgba(241,89,42,0.9)] transition-all duration-300"
  >
    <path fill="#E44D26" d="M71 460L30 0h451l-41 460-185 52"></path>
    <path fill="#F16529" d="M256 472l149-41 35-394H256"></path>
    <path
      fill="#EBEBEB"
      d="M256 208h-75l-5-58h80V94h-143l1 14 14 158h128zm0 146h-1l-63-17-4-44h-57l8 89 117 32h1v-60z"
    ></path>
    <path
      fill="#fff"
      d="M255 208v56h70l-7 73-63 17v60l117-32 1-11 13-144 1-14H255zm0-114v56h139l4-42 1-14H255z"
    ></path>
  </svg>

  <div
    className="absolute bottom-full mb-3 flex flex-col items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
  >
    <div
      className="px-3 py-1.5 bg-gray-900 text-white text-sm rounded-lg shadow-lg"
    >
      HTML5
    </div>
    <div className="w-2 h-2 bg-gray-900 rotate-45 mt-[-4px]"></div>
  </div>
</div>
  );
}