Straight-forward TailwindCSS + HTML Solution

Hi Jared,

Nice solution! It looks super close to the target design and your code looks clean and was easy to read.

A couple of sizes were slightly off (nitpicking 🙈):

• The card's drop shadow should be 8px rather than 5px (shadow-[8px_8px_0_0])
• The avatar should be 32x32px (size-8 rather than size-6)

Also, in your tailwind.config.js, I'm not sure why you defined the base font size to be 16px. I thought this was the default by Tailwind?

To improve accessibility, add an alt tag to the author's image (e.g. alt="Author Greg Hooper") and consider a more descriptive alt tag for the article image (e.g. alt="Illustration representing HTML and CSS concepts").

To improve semantics, perhaps wrap the category tag and publication date in a header and the author details in a footer tag. The date should be in a time tag (Published <time datetime="2023-12-21">21 Dec 2023</time>).

Also, I would extract the card into its own div rather than main to make it more reusable, as it is unlikely the card would be the only content on a page.