How to build an animated sidebar with tailwindcss only

50+ free modern blocks built with tailwindcss
tailus.io/
An animated sidebar built with tailwindcss v2.2.15 and require to enable the "jit" engine.
To go far with the sidebar, you should use JS, the animation in this video is triggered by a temporary state (focus) of the button component.
#tailwindcss #ui #sidebar
play.tailwindcss.com/qXPOMc0BBl

[@Tailus-ui]

20k Views 🎉
Thanks y’all ❤

[@iamhritikpawar]

I am surprised, that's amazing 🔥🔥

[@raymondmichael4987]

What a cool video, thanks buddy

[@alsherifkhalaf7385]

Great 👍👍
But when click on search for example , the sidebar will disappear

[@DiogoMoreira0610]

How to add submenus dropdown in this?

[@adilbek.ermekov]

Interesting...

[@hoangminhnhat1121]

that awesome, but when i try on iphone 7 plus, peer doesn't work. what is the problem here? is it because of the ios version or something that doesn't support peer? could you help me?

[@meschacirung6075]

Try using input:checkbox
ruclips.net/video/hgmLJqSU624/видео.html

[@timmapuramreddy]

Thank you..but the transition is not working Safari on a Mac or iPhone..anyone facing the same issue

[@meschacirung6075]

For safari support you should use an input:checkbox…
Like used in this one
ruclips.net/video/hgmLJqSU624/видео.html

[@bastienv6233]

when we click on an other element than the focus one.. everything disapears.. solution for showing off but not usable

[@Tailus-ui]

Yes,
A good solution for this is to use a checkbox input, like you can see it in our hero sections on tailus.io/blocks/hero-section/

[@user-xz8dh1jc5d]

wtf