popover

<button popovertarget="popover" type="button">Show</button>

<div
	id="popover"
	popover
	class="bg-background mx-5 my-auto rounded-md border p-6 opacity-0 shadow transition-[display,opacity] transition-discrete duration-300 open:opacity-100 motion-reduce:duration-0 sm:mx-auto sm:max-w-96 starting:open:opacity-0"
>
	<div class="mb-4 flex items-center justify-between">
		<div class="font-antique">popover</div>
		<button popovertarget="popover" type="button" class="ghost" title="Close">
			<!-- x-mark -->
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
				class="size-5"
			>
				<path
					d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
				/>
			</svg>
		</button>
	</div>
	<p>This works without JavaScript.</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua.
	</p>
</div>

Overview

With transition behavior: allow-discrete in CSS, you can create an animated popover without JavaScript.