4. 4
    Use Tailwind to Design a span that Looks like a Badge
    7m 11s

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
Hervé Bourzeix
Hervé Bourzeix
~ 3 years ago

Hi, Even though you probably won't come back to this lesson to check the comment, I would like to point out, that setting a ml-2 on the container that wrapping the number of beds and baths, produce some side effect because whenever there no "new" badge, the text will be offset by 2*based rem right? So in this case would it be better to add the margin on the badge itself with mr-2?