Understanding the Basics of Tailwind CSS/

...

/

Solution: Creating a Header with Tailwind CSS

Solution: Creating a Header with Tailwind CSS

Go over the solution to creating a header with Tailwind CSS.

We'll cover the following...

Solution

We’re going to create a header for the agency website by using Web Dev Ninjas as an agency name and Home, Services, Portfolio, and About Us as links.

<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>
<link rel="stylesheet" type="text/css" href="tailwind.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<header class="flex justify-between items-center sticky top-0 z-10 py-4 bg-slate-900">
  <div class="flex-shrink-0 ml-6 cursor-pointer">
    <i class="fas fa-user-ninja fa-2x text-red-600"></i>
    <span class="text-3xl font-semibold text-sky-500">Web Dev Ninjas</span>
  </div>
  <ul class="flex mr-10 font-semibold">
    <li class="mr-6 p-1 border-b-4 border-red-600">
      <a class="cursor-default text-slate-300" href="#">Home</a>
    </li>
    <li class="mr-6 p-1">
      <a class="text-slate-300 hover:text-sky-500" href="#">Services</a>
    </li>
    <li class="mr-6 p-1">
      <a class="text-slate-300 hover:text-sky-500" href="#">Portfolio</a>
    </li>
    <li class="flex-shrink-0 mr-6 p-1">
      <a class="text-slate-300 hover:text-sky-500" href="#">About Us</a>
    </li>
  </ul>
</header>

</body>
</html>
Creating a header for agency website

Note: You can find the output by clicking the URL and the output tab. ...