Oops, Preview doesn't match the Design.
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.
relative class to make the parent
div a position reference.
Then we can add
bottom-* classes to position a child
div anywhere inside the parent
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!