Ping animation (notifications) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a red ping animation circle using Tailwind CSS.

Tailwind

<div class="relative">
  <div class="absolute top-0 right-0 h-3 w-3 rounded-full bg-red-500 [1]"></div>
</div>

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

Aanimate-spin

Banimate-ping

Canimate-bounce

Danimate-pulse

Attempts:

3 left

💡 Hint

Common Mistakes

Using animate-spin or animate-bounce which create different animations.

Forgetting to add the animation class.

The animate-ping class creates a ping animation effect, which is perfect for notification dots.

2fill in blank

medium

Complete the code to position the ping animation circle at the top-right corner of the parent.

Tailwind

<div class="relative">
  <div class="absolute [1] h-3 w-3 rounded-full bg-red-500 animate-ping"></div>
</div>

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

Atop-0 right-0

Bbottom-0 left-0

Ctop-0 left-0

Dbottom-0 right-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using bottom or left classes which position the element elsewhere.

Not using absolute positioning.

The classes top-0 right-0 place the element at the top-right corner inside a relative container.

3fill in blank

hard

Fix the error in the code to make the ping animation visible and properly sized.

Tailwind

<div class="relative">
  <div class="absolute top-0 right-0 h-[1] w-3 rounded-full bg-red-500 animate-ping"></div>
</div>

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

A6

B1

C0

Dfull

Attempts:

3 left

💡 Hint

Common Mistakes

Using zero or very small height which makes the circle invisible.

Using 'full' which is not a valid height class here.

Use h-6 for better visibility of the ping animation with the w-3 width.

4fill in blank

hard

Fill both blanks to create a notification icon with a ping animation and a solid red dot on top.

Tailwind

<div class="relative">
  <svg class="h-6 w-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
  </svg>
  <span class="absolute [1] [2] block h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
  <span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-600"></span>
</div>

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

Atop-0

Bright-0

Cbottom-0

Dleft-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using bottom or left classes which place the ping in the wrong corner.

Forgetting to add both positioning classes.

The ping animation circle should be positioned at the top-right corner using top-0 and right-0 classes.

5fill in blank

hard

Fill all three blanks to create a ping animation with a larger circle, a smaller circle, and position them correctly.

Tailwind

<div class="relative">
  <span class="absolute [1] [2] block h-4 w-4 rounded-full bg-red-400 opacity-75 animate-ping"></span>
  <span class="absolute top-0 [3] block h-2 w-2 rounded-full bg-red-600"></span>
  <button aria-label="Notifications" class="relative">
    <svg class="h-6 w-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
    </svg>
  </button>
</div>

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

Atop-0

Bright-0

Cbottom-0

Dleft-0

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing bottom or left classes which misplace the circles.

Using different positions for the two circles causing misalignment.

The ping circles and the smaller dot should be positioned at the top-right corner using top-0 and right-0. The third blank is the same right-0 to align the smaller circle horizontally.

Practice

1. What does the animate-ping class in Tailwind CSS do in a notification badge?

easy

A. Adds a shadow around the badge

B. Changes the color of the badge to red permanently

C. Makes the badge text blink on and off

D. Creates a circle that expands and fades repeatedly to show a ping effect

Solution

1. Step 1: Understand the purpose of animate-ping

   The animate-ping class in Tailwind creates an animation where an element expands in size and fades out repeatedly.

2. Step 2: Connect to notification badges

   This effect is used to simulate a ping or ripple effect around a notification dot, making it visually stand out.

3. Final Answer:

   Creates a circle that expands and fades repeatedly to show a ping effect -> Option D

4. Quick Check:

   Ping animation = expanding fading circle [OK]

Hint: Remember ping means expanding and fading circle [OK]

Common Mistakes:

• Thinking it changes color permanently
• Confusing ping with blinking text
• Assuming it adds shadows

2. Which of the following is the correct Tailwind CSS syntax to create a ping animation on a small red circle?

easy

A. <div class='w-3 h-3 bg-red-500 rounded-full ping-animation'></div>

B. <span class='w-3 h-3 bg-red-500 rounded-full animate-ping'></span>

C. <span class='w-3 h-3 bg-red-500 rounded-full animate-pulse'></span>

D. <div class='w-3 h-3 bg-red-500 rounded-full animate-spin'></div>

Solution

1. Step 1: Identify the correct Tailwind class for ping animation

   The official Tailwind class for ping effect is animate-ping. Other classes like animate-pulse or animate-spin do different animations.

2. Step 2: Check the element and classes

   The element should have width and height (e.g., w-3 h-3), background color (e.g., bg-red-500), rounded full for circle, and animate-ping for the ping effect.

3. Final Answer:

   <span class='w-3 h-3 bg-red-500 rounded-full animate-ping'></span> -> Option B

4. Quick Check:

   Use animate-ping with size and color classes [OK]

Hint: Use animate-ping class for ping effect, not animate-pulse [OK]

Common Mistakes:

• Using animate-pulse or animate-spin instead of animate-ping
• Misspelling animate-ping as ping-animation
• Forgetting rounded-full for circle shape

3. What will be the visual result of this code snippet?

<div class='relative'>
  <span class='absolute inline-flex h-3 w-3 rounded-full bg-green-400 opacity-75 animate-ping'></span>
  <span class='relative inline-flex rounded-full h-3 w-3 bg-green-500'></span>
</div>

medium

A. A small green dot with a larger fading green circle expanding behind it

B. Two overlapping green dots with no animation

C. A green dot that spins continuously

D. A green dot that blinks on and off

Solution

1. Step 1: Analyze the structure and classes

   The outer div is relative, so the absolute positioned span with animate-ping will expand and fade behind the second span.

2. Step 2: Understand the animation effect

   The first span is a green circle with opacity 75% and ping animation, so it expands and fades repeatedly behind the solid green dot.

3. Final Answer:

   A small green dot with a larger fading green circle expanding behind it -> Option A

4. Quick Check:

   Relative container + absolute ping behind solid dot = expanding fading circle [OK]

Hint: Ping animation needs relative parent and absolute ping span [OK]

Common Mistakes:

• Ignoring relative positioning causing ping to misplace
• Confusing ping with spin or blink animations
• Not noticing opacity for fading effect

4. You wrote this code but the ping animation is not visible:

<span class='w-3 h-3 bg-red-500 rounded-full animate-ping'></span>

What is the most likely reason?

medium

A. The circle size is too big for ping animation

B. The animate-ping class is misspelled

C. The parent container is missing relative positioning

D. Tailwind CSS does not support animate-ping

Solution

1. Step 1: Check the positioning context

   The animate-ping animation uses absolute positioning internally, so the parent must have relative to position the ping correctly.

2. Step 2: Verify other options

   The class animate-ping is correct and supported by Tailwind. Size being too big does not hide animation. Misspelling would cause no animation but question states code as is.

3. Final Answer:

   The parent container is missing relative positioning -> Option C

4. Quick Check:

   Parent needs relative for ping to show [OK]

Hint: Always add relative to parent container for ping animation [OK]

Common Mistakes:

• Forgetting to add relative to parent
• Assuming animate-ping is unsupported
• Changing size thinking it affects animation visibility

5. You want to create a notification icon with a red ping animation on the top-right corner of a bell icon. Which Tailwind CSS setup correctly achieves this with proper layering and positioning?

hard

A. <div class='relative inline-block'>
<svg class='w-6 h-6 text-gray-700'>...bell icon...</svg>
<span class='absolute top-0 right-0 inline-flex h-3 w-3 rounded-full bg-red-500 opacity-75 animate-ping'></span>
<span class='absolute top-0 right-0 inline-flex h-3 w-3 rounded-full bg-red-600'></span>
</div>

B. <div class='inline-block'>
<svg class='w-6 h-6 text-gray-700'>...bell icon...</svg>
<span class='absolute top-0 right-0 h-3 w-3 rounded-full bg-red-500 animate-ping'></span>
</div>

C. <div class='relative'>
<svg class='w-6 h-6 text-gray-700'>...bell icon...</svg>
<span class='relative h-3 w-3 rounded-full bg-red-500 animate-ping'></span>
</div>

D. <div class='relative inline-block'>
<svg class='w-6 h-6 text-gray-700'>...bell icon...</svg>
<span class='absolute bottom-0 left-0 h-3 w-3 rounded-full bg-red-500 animate-ping'></span>
</div>

Solution

1. Step 1: Ensure parent container is relative and inline-block

   The container must be relative to position the ping absolutely relative to the bell icon, and inline-block to size properly.

2. Step 2: Position ping and solid dot at top-right with layering

   Use two span elements: one with animate-ping and opacity for fading effect behind a solid dot. Both positioned absolute top-0 right-0.

3. Final Answer:

   <div class='relative inline-block'> <svg class='w-6 h-6 text-gray-700'>...bell icon...</svg> <span class='absolute top-0 right-0 inline-flex h-3 w-3 rounded-full bg-red-500 opacity-75 animate-ping'></span> <span class='absolute top-0 right-0 inline-flex h-3 w-3 rounded-full bg-red-600'></span> </div> -> Option A

4. Quick Check:

   Relative container + absolute ping + solid dot top-right [OK]

Hint: Use two spans: ping with opacity behind solid dot, both absolute top-right [OK]

Common Mistakes:

• Missing relative on container causing misplacement
• Using relative instead of absolute on ping span
• Positioning ping at wrong corner
• Not layering ping behind solid dot