<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>
<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">
<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>
</body>@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.