Tooltip with only Tailwind

tailwind-only-tooltip.html

<!-- See https://play.tailwindcss.com/PGizn94M2s -->
<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
  <div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
  <div class="relative px-6 pt-10 pb-8 bg-white shadow-xl ring-1 ring-gray-900/5 sm:max-w-5xl sm:mx-auto sm:rounded-lg sm:px-10">
    <div class="max-w-4xl mx-auto">
      <div class="divide-y divide-gray-300/50">
        <div class="py-8 text-base leading-7 text-gray-600">
          <p>
            An amazing Tooltip 
              <span class="group hover:underline cursor-pointer inline-block relative">
                with Tailwind in a long long long long long sentence
                <span class="mx-auto md:w-max opacity-0 duration-300 group-hover:opacity-100 transition-opacity absolute bg-teal-700 text-white px-4 py-2 rounded left-0 md:left-1/2 top-8 md:top-0 md:-translate-x-1/2 md:-translate-y-full max-w-sm">
                 <svg
                 class="text-teal-700 absolute bottom-full flex justify-center w-full left-0 md:bottom-0 md:top-full md:rotate-180"
                  xmlns="http://www.w3.org/2000/svg"
                  width="28"
                  height="10"
                  viewBox="0 0 28 10"
                >
                  <path
                    fill="currentColor"
                    d="M12.63 1.83 8.27 8.25A4 4 0 0 1 4.97 10h17.8a4 4 0 0 1-3.3-1.75L15.1 1.83a1.5 1.5 0 0 0-2.48 0z"
                  />
                </svg>
                  I am a tooltip! I am a tooltip!  I am a tooltip!  I am a tooltip! 
                </span>
            </span>. Seriously, nothing else but CSS with HTML</p>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>