TailwindCSS Animated Border Gradient (MIND BLOWING!)

Let's create an animated gradient border with Tailwind. It's absolutely stunning, and the technique is super interesting!
📚 Source Code:
play.tailwindcss.com/HGOa6lIqf6
🔗 Socials:
X - x.com/arielweinberger
LinkedIn - / arielweinberger
Timestamps:
00:00 Animated Gradient Border Effect
00:55 Demonstration
01:38 Coding The Effect
08:28 Adjustments/Customization
09:10 Outro
🎶 Credits
Music by: www.bensound.com/free-music-f...
License code: MIQTBMPCVR3OVLX0

[@reubenblamey11]

I learnt a lot, thank you! Truly mind blowing.

[@Pareshbpatel]

Wow! - a really great tutorial on how to create an animated border-gradient with TailwindCSS!. Thanks, Ariel.
{2024-04-21}

[@voldemortvi4264]

Amazing tutorial

[@fernandoli6743]

thx bro, amazing content

[@manoshandom4525]

wow great creation :)

[@Agent-zn2gl]

This is super nice

[@2ru2pacFan]

Nice! ❤

[@iamparmjeetmishra]

Amazing

[@raiyansarker]

liked it and would like to see more.

[@ubfinn]

Cool!!

[@sakarsr]

very cool 😀

[@jte_gaming841]

I found a problem, when the card is a rectangle instead of a square, it doesnt work as intended. Can you make another video on this on how to fix etc?

[@CristianKirk]

Yeah, it's mindblowing to use tailwind to do something as basic as this.

[@nkdeus]

Hahahaha, a bro troll -)
But yes, true :p

[@jfhandfield]

Nice tutorial. Thank you. Would be nice if you could do the same on a shadCN button!

[@user-hb6yb6bu8n]

Can the height of the card-wrapper be dynamic (auto)?

[@SpeedCodes-oc7ed]

hi Ariel, i love your udemy courses, hence do you thinking to create a complete animation course for tailwind?

I would be interested in seeing if we can use a clipping mask to achieve the same with a transparent background or backdrop-filter on the content element 🤔

[@nkdeus]

Of course, but you can do à clip mask with border radius.

[@bumpyy]

I like the explanation, but the audio was kinda low for me.
Maybe add mouse interaction next ?

[@codinglyio]

@bumpyy Fixed that in upcoming videos! It was my first video on the channel, took a while to to get the audio sorted. When you say mouse interaction, do you mean like in AuthKit.com, where you move your mouse and the container moves as well?

[@ITSKILLSACADEMY]

That was cool

[@godofwar8262]

Keep it up bro did you have discord

[@codinglyio]

I'll set it up!