Intro section with dropdown navigation using Tailwindcss

This is the first challenge I solve which asks for a dropdown menu.

In order to maximize my learning experience, I have solved the dropdown menu problem in 2 different way : 1- using CSS only - This was my first time solution to use CSS to take action like opening a dropdown menu. 2- Using Javascript which is the regular way where we use addEventListener on the targeted element.

For the first method using CSS, the main issue you need to understand is the fact that the hover effect can be used to change the status for different elements, not the element where you hover over. if you have two divs - the first one is black and the second one is green. You can hover over the black box and change the color of the second green box to red for example.

I have neglected many small details in this challenge like fonts, colors, or some alignment issues. This is my second challenge at the junior level and I'm trying to deeply understand how things really work behind the scenes, and not just come up with a solution. I started already a new Javascript course and I do hope to learn new things to make my JS code look and work better, namely, I want to write a clean code