Create Animated expandable cards with Tailwind CSS and Framer Motion | React.js

In this video you will learn to create a card component using react.js, tailwind css, and animate it with framer-motion.
Assets: drive.google.com/drive/folder...
Source Code: gist.github.com/Mif2006/083f4...

[@GoogleUser-nx3wp]

Great tutorial though really appreicated source code and a nice short tutorial also your reponse as well love the + energy

[@arielelias2413]

thx for this kind of content

[@Diego_Cabrera]

Nice tutorial!

[@stinger2119]

thanks, but custom tailwind code is missing, especially for the card class

[@GoogleUser-nx3wp]

How can i keep them initially expanded also how i increase the cards width?

[@WebChainDev]

To increase the card width you can go to the cardVariants, where you can change the width for the collapsed and expanded cards. Currently it is 200px and 400px

[@WebChainDev]

As for keeping them expanded, the initial and animate attributes in the motion.div do that. First you need to change initial to "expanded", then change the animate to your liking. If you simply want to reverse it and make all of them initially expanded and close on click, then you can change the === in animate to !==

[@sunil.noob.1404]

Hey i tried to develop this but the cards are not showing properly like it is expanding and functioning properly but the images are not showing

[@Mayronv_]

Have the same issue

[@GoogleUser-nx3wp]

Would have appreciated Source Code

[@WebChainDev]

Here it is: gist.github.com/Mif2006/083f4d5f54909b7b9eff6d864ae71961

[@GoogleUser-nx3wp]

@@WebChainDev Thank you bro