Ping animation (notifications) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will you see with this Tailwind ping animation code?

Look at this HTML snippet using Tailwind CSS classes for a ping animation on a notification dot. What is the visible effect in the browser?

Tailwind

<div class="relative flex items-center justify-center w-10 h-10 bg-gray-200 rounded-full">
  <span class="absolute inline-flex h-3 w-3 top-1 right-1">
    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
  </span>
</div>

A A small red dot with a fading expanding red circle around it that repeats continuously.

B A static red dot with no animation or movement visible.

C A large red circle that grows and disappears once and then stops.

D A red dot that changes color from red to blue repeatedly.

💡 Hint

Focus on the animate-ping class and how it affects the inner span.

The animate-ping class in Tailwind creates a continuous expanding and fading circle effect behind the solid dot, simulating a ping or pulse animation.

❓ selector

intermediate

Which Tailwind class controls the speed of the ping animation?

Given the ping animation uses the class animate-ping, which class would you add or modify to make the ping animation slower?

A animate-ping-slow

B duration-3000

C speed-500

D delay-200

💡 Hint

Tailwind uses duration- classes to control animation speed in milliseconds.

The duration-3000 class sets the animation duration to 3000ms (3 seconds), making the ping animation slower than the default.

🧠 Conceptual

advanced

Why is the ping animation wrapped in two nested spans in this Tailwind example?

Consider this structure: Why are there two spans inside the outer span?

A They are duplicates and one can be removed without effect.

B Both spans create two overlapping ping animations for a stronger effect.

C One span is for accessibility labels, the other for animation.

D One span creates the expanding ping effect, the other is the solid dot on top.

💡 Hint

Think about layering and how animations and static elements combine visually.

The first inner span uses animate-ping to create the expanding circle behind, while the second inner span is the solid dot that stays visible on top.

❓ accessibility

advanced

How to improve accessibility for a ping notification dot in Tailwind?

You have a red ping dot indicating new notifications. Which addition improves screen reader accessibility?

Tailwind

<span class="relative inline-flex h-3 w-3 rounded-full bg-red-500"></span>

A Add alt="Red dot" attribute to the span.

B Add tabindex="-1" to make it focusable.

C Add aria-label="New notifications" and role="status" to the span.

D No changes needed; color alone is enough.

💡 Hint

Think about how screen readers get information about visual indicators.

Adding aria-label and role="status" helps screen readers announce the notification presence, improving accessibility beyond color alone.

❓ layout

expert

How to position a ping notification dot at the top-right corner of a profile picture using Tailwind?

You have a profile picture inside a div with class "relative w-16 h-16 rounded-full overflow-hidden". Which code snippet correctly places a ping dot at the top-right corner overlapping the picture?

A

<span class="absolute top-0 right-0 h-4 w-4">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-4 w-4 bg-green-500"></span>
</span>

B

<span class="relative top-0 right-0 h-4 w-4">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-4 w-4 bg-green-500"></span>
</span>

C

<span class="fixed top-0 right-0 h-4 w-4">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-4 w-4 bg-green-500"></span>
</span>

D

<span class="absolute bottom-0 left-0 h-4 w-4">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-4 w-4 bg-green-500"></span>
</span>

💡 Hint

Remember the parent div is relative, so use absolute positioning on the dot.

Using absolute positioning with top-0 and right-0 places the ping dot exactly at the top-right corner inside the relative parent. Fixed positioning would place it relative to the viewport, which is incorrect.