Document tailwind use, add examples

[nuke-web3]

Following from https://github.com/Polkadot-Blockchain-Academy/pba-content/pull/683 - we want to expose and demo how to minimal use tailwind with any PBA specific features

• [ ] CONTRIBUTING.md
• [ ] Copy&Paste template example(s)

[wirednkod]

This is a valid point, but we need to identify the "features". If there is a list for these features that you have in mind, that would be awesome

[nuke-web3]

A few related ones to start:

• [ ] #452
• [ ] #692

Basically here showcasing in copy&paste templates the most common patters (2 col equal split, 2 col custom % split right vs left width, size and place an element and make the rest of the slide work around it (an img with rounded corners and size in px as we do not want relative sizing)

[nuke-web3]

IMHO we should intentionally limit exposure to the full power of tailwind (of course everyone can use this) but I do not want to encourage everyone spending time micro-managing style for their slides... that is an anti-goal of using this slide system. Thus whatever we document and implement using tailwind should be biased to "just work" and not encourage nuanced styling.

[wirednkod]

My intention for tailwindcss was from the beginning to use it for avoiding custom classes and code here and there. Everything will be inside the md file (makes things concentrated)