Animatable Time Tracking dashboard (with dark and light modes)

What are you most proud of, and what would you do differently next time?

I used TailwindCSS for this project. I didn't personally like it and will try to go with another CSS solution next time. And I also used GSAP for a little bit of animation. I also incorporated light and dark mode so that the user can toggle between those by checking an input checkbox.

What specific areas of your project would you like help with?

I would like to seek help in three things in particular.

1.) When turning the dark mode on by checking the input checkbox, the dark mode will appear on screen, and it will persist on page refresh, as I set localStorage for it. However, input checkbox will go back to its unchecked state on page refresh, and the result is dark mode appearing although input checkbox is not checked (on page refresh). I tried to use localStorage so that on page refresh input checkbox stays toggled on based on the the value of the checked attribute but I still have not found any solution for that.

2.) Second major problem I had is with gsap animation. I wanted to animate on each button click, that card component hides its content inside and then shrinks down to height of zero, and then wait 0.75 seconds to rise to its normal height, and then display its content again by making it visible. However, it seems that contentVisibility is not animatable (or atleast that is what i think). How could I successfully animate content inside parent to hide and reappear?

3.) I used ref.current.clientHeight to calculate height of a card, when making gsap animation explained in second problem, but as I shrink the window the height is a bit different for mobile and laptop devices and it gets a little distorted. Is there a way that height would readjust dynamically when resizing? Is this something resize event listener would help?