Use Tailwind to Design a span that Looks like a Badge

Adam Wathan
InstructorAdam Wathan

Share this video with your friends

Send Tweet

In this lesson, we'd like to highlight that this listing is new. To do this we'll need to build a badge that will do just that.

The badge will be an inline element with the text right above the title as a span. We'll see how to color, position, and size it with Tailwind utility classes.

Some classes we will use:

  • inline-block for correct padding behavior in the span
  • bg-teal-200 and text-teal-800 to adjust color
  • uppercase font-semibold tracking-wide to adjust the look of the badge text
  • flex anditems-baseline to adjust the positioning