Collection of free Tailwind CSS badge code examples from Codepen and other resources.

Demo image: Tailwind CSS Default Badges With Icon

Author

  • PostSrc

Links

Made with

  • HTML / CSS

About a code

Tailwind CSS Default Badges With Icon

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.7

Demo image: Tailwind CSS Simple Icon With Badge

Author

  • PostSrc

Links

Made with

  • HTML / CSS

About a code

Tailwind CSS Simple Icon With Badge

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.7

Demo image: Tailwind CSS Simple Number Badge

Author

  • PostSrc

Links

Made with

  • HTML / CSS

About a code

Tailwind CSS Simple Number Badge

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.7

Demo image: Badge Primer Diff Stat

Author

  • TailwindTemplates

Links

Made with

  • HTML / CSS

About a code

Badge Primer Diff Stat

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.0

Demo image: Primer State Labels

Author

  • TailwindTemplates

Links

Made with

  • HTML / CSS

About a code

Badge Primer State Labels

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.0

Demo image: Argon Badges

Author

  • TailwindTemplates

Links

Made with

  • HTML / CSS

About a code

Argon Badges

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.0

Demo image: Orbit Badges: Success

Author

  • TailwindTemplates

Links

Made with

  • HTML / CSS

About a code

Orbit Badges: Success

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.0

Demo image: Badged Buttons

Author

  • whoisthisstud

Links

Made with

  • HTML / CSS

About a code

Badged Buttons

Buttons with number badges.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Demo image: Tailwind Badges

Author

  • Chris Sev

Links

Made with

  • HTML / CSS

About a code

Tailwind Badges

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Store Buttons Badge

Author

  • iCodeart

Links

Made with

  • HTML / CSS

About a code

Store Buttons Badge

App Store and PlayStore buttons badge.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.1

Demo image: Tailwind Badge

Author

  • Andre Prilly Kurniawan

Links

Made with

  • HTML / CSS

About a code

Tailwind Badges

Tailwind CSS Badges and badge with dot.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.6.1

Demo image: Badges with Icons

Author

  • Alan Reid

Links

Made with

  • HTML / CSS

About a code

Badges with Icons

Just some simple badge examples, with icons from Font Awesome.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Tailwind version: 1.2.0

Demo image: Badge Notification

Author

  • FIsh24

Links

Made with

  • HTML / CSS

About a code

Badge Notification

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: Badge

Author

  • killgt

Links

Made with

  • HTML / CSS

About a code

Badge

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0