Drop shadow on irregular shapes in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a basic drop shadow to a div using Tailwind CSS.

Tailwind

<div class="bg-blue-500 p-6 rounded-lg [1]">
  Drop shadow box
</div>

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

Aborder-4

Bopacity-50

Ctext-center

Dshadow-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using border classes instead of shadow classes.

Using text alignment classes which don't affect shadows.

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

2fill in blank

medium

Complete the code to apply a drop shadow only on hover using Tailwind CSS.

Tailwind

<button class="bg-green-400 p-4 rounded [1]">
  Hover me
</button>

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

Ahover:shadow-md

Bfocus:shadow-md

Cshadow-md

Dactive:shadow-md

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-md which applies shadow always.

Using focus:shadow-md which applies shadow on focus, not hover.

The hover:shadow-md class applies a medium drop shadow only when the button is hovered.

3fill in blank

hard

Fix the error in the code to add a drop shadow to an irregular shape with Tailwind CSS.

Tailwind

<div class="w-40 h-40 bg-purple-600 rounded-full [1]">
  Circle with shadow
</div>

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

Ashadow-none

Bshadow-outline

Cshadow-2xl

Dshadow-inner

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-none which removes shadows.

Using shadow-inner which adds inner shadow, not drop shadow.

The shadow-2xl class adds a strong drop shadow suitable for irregular shapes like circles.

4fill in blank

hard

Fill both blanks to create a drop shadow on an irregular polygon shape using Tailwind CSS.

Tailwind

<div class="w-48 h-48 bg-red-500 [1] [2]">
  Polygon with shadow
</div>

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

A[clip-path:polygon(50%_0%,0%_100%,100%_100%)]

Bshadow-lg

Cshadow-md

Dcircle

Attempts:

3 left

💡 Hint

Common Mistakes

Using circle instead of polygon clip-path.

Using no shadow or too small shadow classes.

The [clip-path:polygon(50%_0%,0%_100%,100%_100%)] arbitrary class clips the div into a polygon shape, and shadow-lg adds a large drop shadow.

5fill in blank

hard

Fill all three blanks to create a custom drop shadow on an irregular shape with Tailwind CSS.

Tailwind

<div class="w-56 h-56 bg-yellow-400 rounded-[1] shadow-[2] [3]">
  Custom shadow shape
</div>

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

Axl

Chover:shadow-2xl

Dmd

Attempts:

3 left

💡 Hint

Common Mistakes

Using small rounding or shadow sizes.

Not adding hover effect for shadow.

The rounded-xl class rounds corners nicely, shadow-xl adds a large shadow, and hover:shadow-2xl makes the shadow bigger on hover.