<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-stone-900">

  <div class="test p-12 text-orange-500 text-7xl font-extrabold">
    <p>Test text</p>

  <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(https://goodreds.net/images/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">
              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" />
                  I am a tooltip! I am a tooltip! I am a tooltip! I am a tooltip!
              </span>. Seriously, nothing else but CSS with HTML

@tailwind utilities;

@layer utilities {
  .above-the-fold {
    font-family: serif;
    color: red;

  @supports (font-variation-settings: normal) {
    .above-the-fold {
      font-family: sans-serif;
      color: green;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.3/cdn.js