Preview page with HTML, CSS, and vanilla Javascript

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

Learnt how to implement javascript!

What challenges did you encounter, and how did you overcome them?

I didn't know how to structure the DOM so that the pop-out can react in different ways when viewed in different sizes of viewports but eventually solved the problem after asking for advice in the discord community!

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

There are multiple areas that I was struggling in - would love any advice on how to approach them!

1. How do I create a tailwind for the popout? I saw a great approach using position absolute for the :after element and position it in relation to the popout, but my popout is itself positioned absolute so I couldn't us this approach.
2. For the desktop view, I'm currently positioning the popout with top and left properties, however, I had to calculate the px for both of these properties to center the popout according to the share button. Would appreciate any ideas that would make this more responsive and straightforward!
3. I can't figure out a way to make the share button align with both the author's information and the share popout in all devices size. At some point when I shrink the viewport to a size between desktop and mobile, the share button is positioned weirdly (it always stays horizontally aligned with the author's information, but it's a lot higher compared to the popout)

Would appreciate any ideas to solve these problems! Thank you.