Box shadow utilities in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a small shadow to the box using Tailwind CSS.

Tailwind

<div class="shadow[1] p-4 bg-white rounded">Shadow Box</div>

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

A-xl

B-lg

C-sm

D-2xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-lg or bigger classes for a small shadow.

Forgetting the dash before size like shadowsm.

The shadow-sm class adds a small shadow to the element.

2fill in blank

medium

Complete the code to add a large shadow to the box using Tailwind CSS.

Tailwind

<div class="shadow[1] p-6 bg-gray-100 rounded">Large Shadow Box</div>

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

A-xl

B-md

C-sm

D-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-sm which is too small.

Using shadow-xl which is extra large.

The shadow-lg class adds a large shadow to the element.

3fill in blank

hard

Fix the error in the code to apply a medium shadow using Tailwind CSS.

Tailwind

<div class="shadow[1] p-5 bg-blue-50 rounded">Medium Shadow Box</div>

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

Amd

B-md

Cmedium

D-medium

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dash before the size.

Using full words like medium which Tailwind does not support.

The correct class is shadow-md with a dash before md.

4fill in blank

hard

Fill both blanks to create a box with an extra large shadow and padding of 8.

Tailwind

<div class="shadow[1] p-[2] bg-green-50 rounded">Extra Large Shadow Box</div>

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

A-xl

B-lg

C8

D6

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-lg instead of shadow-xl.

Using wrong padding number like p-6.

shadow-xl adds an extra large shadow and p-8 adds padding of 2rem.

5fill in blank

hard

Fill all three blanks to create a box with a double extra large shadow, padding 10, and rounded corners.

Tailwind

<div class="shadow[1] p-[2] rounded[3] bg-yellow-50">Double XL Shadow Box</div>

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

A-2xl

B10

C-lg

D-md

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-xl instead of shadow-2xl.

Forgetting the dash in rounded-lg.

Using wrong padding like p-8.

shadow-2xl adds a very large shadow, p-10 adds padding of 2.5rem, and rounded-lg adds medium rounded corners.