Decorative Quote Mark
We often see these decorative quote marks in modern web designs.
To make our own decorative texts with Tailwind CSS, the trick is to put them in a position relative to the major texts.
Use relative
class to make the parent div
a position reference.
Then we can add absolute
and top-*
/left-*
/right-*
/bottom-*
classes to position a child div
anywhere inside the parent div
.
Check these docs for more details:
- Position (relative) - Tailwind CSS
- Position (absolute) - Tailwind CSS
- Top / Right / Bottom / Left - Tailwind CSS
With Tailwind JIT, you may also use ::before
pseudo element to achieve the same effect.
Check out What's New in Tailwind CSS v2.2 - YouTube to learn this trick.
Unfortunately, CSSKatas doesn't support JIT yet.
So please remember to subscribe to the CSSKata newsletter to get notified when we add JIT support.
And come back to this Kata then!