Sidebar with main content in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a sidebar container using Tailwind CSS.

Tailwind

<div class="[1] bg-gray-200 h-screen p-4">
  Sidebar content
</div>

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

Aw-64

Bh-64

Cp-8

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using height classes instead of width for the sidebar container.

Using padding classes that don't affect width.

The class w-64 sets the sidebar width to a fixed size, which is common for sidebars.

2fill in blank

medium

Complete the code to create a flex container that places sidebar and main content side by side.

Tailwind

<div class="[1] h-screen">
  <!-- Sidebar and main content here -->
</div>

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

Aflex

Bgrid grid-cols-2

Cblock

Dinline-block

Attempts:

3 left

💡 Hint

Common Mistakes

Using block which stacks elements vertically.

Using grid without defining columns.

The flex class creates a flex container that arranges children side by side by default.

3fill in blank

hard

Fix the error in the sidebar class to make it fixed on the left side of the screen.

Tailwind

<div class="[1] bg-gray-200 h-screen p-4">
  Sidebar content
</div>

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

Arelative left-0 bottom-0 w-64

Bfixed left-0 top-0 w-64

Csticky top-0 right-0 w-64

Dabsolute right-0 top-0 w-64

Attempts:

3 left

💡 Hint

Common Mistakes

Using absolute with right positioning instead of left.

Using relative which does not fix the sidebar.

The classes fixed left-0 top-0 w-64 fix the sidebar to the left side of the screen and set its width.

4fill in blank

hard

Fill both blanks to create a main content area that fills the remaining space next to the fixed sidebar.

Tailwind

<main class="ml-[1] p-6 [2]">
  Main content goes here
</main>

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

A64

Bflex-1

Cw-full

Dh-full

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add left margin to main content.

Using width classes that don't allow flexible resizing.

The class ml-64 adds left margin equal to the sidebar width, and flex-1 makes the main content fill remaining space.

5fill in blank

hard

Fill all three blanks to create a responsive sidebar and main content layout with Tailwind CSS.

Tailwind

<div class="[1] min-h-screen">
  <aside class="[2] [3] bg-gray-300 p-4">
    Sidebar content
  </aside>
  <section class="flex-1 p-6">
    Main content
  </section>
</div>

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

Aflex

Bw-56

Cmd:w-64

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using block on container which stacks elements.

Not using responsive width classes for sidebar.

The container uses flex to arrange children side by side. The sidebar has a base width w-56 and a medium screen width md:w-64 for responsiveness.