Challenge: Creating a Header with Tailwind CSS

Practice how to add a header to a website in this challenge.

We'll cover the following

Problem statement

Create a header for an example agency website with the following requirements:

  • Use slate-900 color as the header’s background.

  • Include the following links: Home, Services, Portfolio, and About Us.

  • Use slate-300 color for the links and sky-500 for the hover effect.

  • Add a thick bottom border (2 units) with red-600 color for the Home link.

  • Use user-ninja icon as a logo with red-600 color.

  • Use Web Dev Ninjas for the agency’s name with sky-500 color.

  • Prevent Web Dev Ninjas and About Us texts from shrinking by using the appropriate utility class.

Expected output

The output should look like this:

Get hands-on with 1200+ tech skills courses.