Navigation bar patterns in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a navigation bar container with Tailwind CSS.

Tailwind

<nav class="bg-gray-800 p-4 [1]">
  <!-- Navigation content -->
</nav>

Drag options to blanks, or click blank then click option'

Ablock

Bgrid

Cflex

Dhidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using block which stacks items vertically.

Using hidden which hides the navigation bar.

The flex class creates a flexible container that arranges child items in a row by default, perfect for navigation bars.

2fill in blank

medium

Complete the code to add spacing between navigation links using Tailwind CSS.

Tailwind

<ul class="flex space-[1]-4">
  <li><a href="#" class="text-white">Home</a></li>
  <li><a href="#" class="text-white">About</a></li>
  <li><a href="#" class="text-white">Contact</a></li>
</ul>

Drag options to blanks, or click blank then click option'

Ax

By

Cz

Dw

Attempts:

3 left

💡 Hint

Common Mistakes

Using space-y-4 which adds vertical spacing.

Using unknown spacing directions like space-z-4.

The space-x-4 class adds horizontal spacing between child elements in a flex container.

3fill in blank

hard

Fix the error in the code to make the navigation links change color on hover.

Tailwind

<a href="#" class="text-white [1]:text-gray-300">Services</a>

Drag options to blanks, or click blank then click option'

Avisited

Bfocus

Cactive

Dhover

Attempts:

3 left

💡 Hint

Common Mistakes

Using focus which applies when the element is focused by keyboard.

Using active which applies when the element is clicked.

The hover prefix applies styles when the mouse is over the element, perfect for hover effects.

4fill in blank

hard

Fill both blanks to create a responsive navigation bar that stacks vertically on small screens and horizontally on larger screens.

Tailwind

<nav class="bg-gray-900 p-4 flex-col [1]:flex-row [2]:flex-col">
  <a href="#" class="text-white p-2">Home</a>
  <a href="#" class="text-white p-2">Blog</a>
  <a href="#" class="text-white p-2">Contact</a>
</nav>

Drag options to blanks, or click blank then click option'

Amd

Bsm

Clg

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Reversing the breakpoints causing layout to not switch correctly.

Using breakpoints that don't exist or are too large.

The navigation uses flex-col by default (small screens) and switches to flex-row on medium (md) screens and above.

5fill in blank

hard

Fill all three blanks to create a navigation bar with a logo on the left, links centered, and a button on the right using Tailwind CSS flex utilities.

Tailwind

<nav class="flex items-center justify-[1] bg-blue-600 p-4">
  <div class="text-white font-bold">MyLogo</div>
  <ul class="flex space-x-6 [2]">
    <li><a href="#" class="hover:underline">Home</a></li>
    <li><a href="#" class="hover:underline">Services</a></li>
    <li><a href="#" class="hover:underline">Contact</a></li>
  </ul>
  <button class="[3] bg-white text-blue-600 px-4 py-2 rounded">Sign Up</button>
</nav>

Drag options to blanks, or click blank then click option'

Abetween

Bml-auto

Cmx-auto

Dmr-auto

Attempts:

3 left

💡 Hint

Common Mistakes

Using mr-auto instead of ml-auto for right alignment.

Not using justify-between causing items to cluster.

justify-between spreads items across the nav horizontally. The logo stays left, the links are centered with mx-auto, and the button moves right with ml-auto.