Use Tailwind to Design a span that Looks like a Badge

Tailwind

Share this video with your friends

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?