Tailwind CSS

Hi Undie Fidelis,

I just looked at your solution to the project. I have to admit that I don't know a shit about tailwind! :) Never used it and never even tried to. So hard for me to make concret tips on how to improve. But I think I could give you some kind of 'strategies' or advices on how to improve things in general. Here is what I'd do or did in my own solution respectively:

1. on hovering the 'garbage-bin' delete-button in the cart: give it a transform: scale(1.3) to make it stand out and clearly mark it as click-able. The 'checkout' button as well misses a hover-state. You should do the same as with the 'add to cart' button.

2. The underline when hovering the main-menu-items: Try to give the menu-items a padding-bottom, so that this padding is the lead in creating the space to the horizontal grey line bellow the head. And on hover you creat the border-bottom of the menu-items. You probably also have to set 'box-sizing' property to 'border-box'. This way you should get two things. First (and most important) The main-layout should stopps "jumping" when hovering the menu-items, because the appearing border-bottom doesn't take extra space! Second: The underline gets down to the grey horrizontal line according to the design.

3. You should add a way to close the cart other than reloading the page :) One easy way could be: On clicking the checkout-button you return to page. Problem with that: It's not intuitive and with an empty card you don't even have it. So I integrated a 'cross' symbol in the upper right corner of the cart to clearly mark it as close-able. Also with transform: scale(1.3) on hover. The cross can easliy be generated with a span of innerHTML: × like this: <span class="closing-cross" id="close-cart" role="button" aria-label="close cart preview and return to page">×</span></p>

As I said I didn't know how to integrate these things in your code of tailwind. But maybe I could inspire you a bit on how to improve things overall... If you like, have a look at my own solution of this project. Always happy coding and happy learging!! :)

Harm