Six close buttons in Tailwind: a round SVG X, a rotating dark button, a labelled pill with an Esc hint, a dismissible alert, ghost, soft and solid variants, and a close button that stays visible over photos.
A round close button with an SVG cross, a hover tint and a focus ring, all in Tailwind classes. aria-label="Close" names the icon-only button, and h-10 w-10 gives a comfortable target on touch screens.
A dark close button that rotates 90 degrees on hover and focus with hover:rotate-90 and a transition. motion-reduce:transform-none keeps it still for people who prefer less motion, while the colour change still signals interaction.
A pill button with an X and the word Close plus an Esc hint in a kbd element. The visible text is the accessible name, which is clearer than an icon alone, and the shortcut hint teaches keyboard users a faster way out.
A warning alert with a close button in its top corner. The button is named Dismiss warning, and the inline handler removes the alert; in an app you would also remember the dismissal so it does not come back on reload.
View code
<div role="alert" class="relative w-full max-w-sm rounded-xl border border-amber-300 bg-amber-50 p-4 pr-12 text-sm text-amber-900">
<b class="block">Stock is running low</b>Only 3 units left of the linen tote.
<button aria-label="Dismiss warning" onclick="this.parentElement.remove()" class="absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-lg text-amber-800 hover:bg-amber-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-amber-700">×</button>
</div>
05. Tailwind Close Button Variants
TailwindVariants
Ghost, soft and solid close buttons in three sizes, showing which utilities change: size, background and text colour. The same SVG path is reused, scaled by the h-* and w-* utilities on the icon.
A close button over a picture with a translucent dark background, a white ring and backdrop-blur, so it stays visible on light or dark photos. The figure has a caption and the image placeholder has a description.