The specific challenge I'm facing is a React.js and TailwindCSS-based card. This card features buttons for actions like 'like', 'share', and 'bookmark' "open website link", "show details". The problem lies in the duplication of the 'open website link' and 'show details' buttons, which occupies unnecessary space. Users can quickly notice that these buttons are fixed in place, unlike the 'bookmark' button that dynamically changes based on user actions – a crucial visual aspect while navigating through the cards.
I tried to add a fancy animation like the one on https://fluent2.microsoft.design's "Home" -> "Newsworthy" section. I wanted to save space when users look at the cards without hovering over them. My plan was to lift the stuff inside the card and make two buttons show up, all while keeping the card's size the same, when user hovers the card. I looked around on the internet and used React.js, JavaScript, TailwindCSS, and Framer-Motion to do this, but unfortunately, the animation I wanted just didn't work out.
