With this quick project, I've learned how to utilize the TailwindCSS documents for styling. For example, if I wanted to add 2rem of padding to the left of an element, according to the documents I would use pl-8 as a class name.

I also found Hero Icons from the creators of Tailwind CSS. I thought that was interesting. I almost just copied the svg version of the Menu icon but noticed they had a specific embed code for JSX so I used that for my React site.

Of course, the icon was HUGE, so I ended up resizing the width and height of it. The menu icon appears on tablet-sized screens or smaller.

I also used the "role" attribute to help screen readers understand the links in the navbar.

At first, I thought my only option to make it responsive was to use md: but then after reading a bit more, I managed to utilize lg: and sm: as well. I used these features throughout this little project and I'm feeling better about it.