Badge components

Badges are a very useful component to label your texts on your website.
Like all other components, we try to use class names similar to bootstrap so switching from Bootstrap to Tailwind, would not be hard for you.
Normal badge colors
".badge-error" or ".badge-red"
".badge-success" or ".badge-green"
".badge-info" or ".badge-blue"
".badge-primary" or ".badge-theme"
".badge-warning" or ".badge-yellow"
".badge-purple"
".badge-pink" 
 
<span class="badge badge-danger"> ... </span> 

<span class="badge badge-success"> ... </span> 
<span class="badge badge-info"> ... </span> 
<span class="badge badge-primary"> ... </span> 
<span class="badge badge-warning"> ... </span> 
<span class="badge badge-purple"> ... </span> 
<span class="badge badge-pink"> ... </span>
Edit your badge corners
By default, all badge corners used ".rounded-full" but you can change it with built-in classes
".badge-rounded" is similar to ".rounded"
".badge-rounded-sm" is similar to ".rounded-sm"
".badge-rounded-md" is similar to ".rounded-md"
".badge-rounded-lg" is similar to ".rounded-lg"
".badge-rounded-xl" is similar to ".rounded-xl"
".badge-rounded-2xl" is similar to ".rounded-2xl"
".badge-rounded-none" is similar to ".rounded-none" 
 
<span class="badge badge-danger badge-rounded"> ... </span> 

<span class="badge badge-success badge-rounded-sm"> ... </span> 
<span class="badge badge-inf badge-roundedo-md"> ... </span> 
<span class="badge badge-primary badge-rounded-lg"> ... </span> 
<span class="badge badge-warning badge-rounded-xl"> ... </span> 
<span class="badge badge-purple badge-rounded-2xl"> ... </span> 
<span class="badge badge-pink badge-rounded-none"> ... </span>