Block, inline, and inline-block in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the element a block-level element using Tailwind CSS.

Tailwind

<div class="[1]">This is a block element.</div>

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

Ablock

Binline

Cinline-block

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'inline' or 'inline-block' instead of 'block' will not make the element block-level.

The block class makes the element a block-level element, which takes full width and starts on a new line.

2fill in blank

medium

Complete the code to make the element display inline using Tailwind CSS.

Tailwind

<span class="[1]">This is an inline element.</span>

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

Ainline

Bblock

Cinline-block

Dgrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' will make the element start on a new line.

Using 'inline-block' allows width and height but is not purely inline.

The inline class makes the element display inline, so it flows with text and does not start on a new line.

3fill in blank

hard

Fix the error in the code to make the element display as inline-block using Tailwind CSS.

Tailwind

<button class="[1]">Click me</button>

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

Ablock

Binline

Cinline-block

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'inline' will not allow width and height to be set.

Using 'block' will make the element start on a new line.

The inline-block class makes the element behave like an inline element but allows setting width and height.

4fill in blank

hard

Fill both blanks to create a list where items are inline-block and the container is block-level.

Tailwind

<ul class="[1]">
  <li class="[2]">Item 1</li>
  <li class="inline-block">Item 2</li>
</ul>

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

Ablock

Binline

Cinline-block

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'inline' on list items will not allow width or height control.

Using 'inline' on the container will break the list layout.

The block class on the ul makes it block-level, and inline-block on li makes list items flow inline but keep box properties.

5fill in blank

hard

Fill all three blanks to create a navigation bar where the container is block, links are inline-block, and the active link is inline.

Tailwind

<nav class="[1]">
  <a href="#" class="[2]">Home</a>
  <a href="#" class="[3]">About</a>
</nav>

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

Ablock

Binline-block

Cinline

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex' on container changes layout behavior.

Using 'block' on links makes them stack vertically.

The block class makes the nav container block-level. The first link uses inline-block to allow box styling, and the active link uses inline to flow inline without box control.