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

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
~ 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?