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.