1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Use Tailwind to Design a span that Looks like a Badge

    tailwindTailwind

    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