<section
  class="flex h-screen place-content-center items-center bg-background px-4"
>
  <div>
    <span
      class="ml-1 inline-flex items-center space-x-0.5 rounded-md px-2.5 py-0.5 text-xs font-medium text-foreground ring-1 ring-inset ring-input/10"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="12"
        height="12"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="text-primary"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path
          d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"
        /></svg
      ><span>Primary</span></span
    >
    <span
      class="ml-1 inline-flex items-center space-x-0.5 rounded-md px-2.5 py-0.5 text-xs font-medium text-foreground ring-1 ring-inset ring-input/10"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="12"
        height="12"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="text-secondary"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path
          d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"
        /></svg
      ><span>Secondary</span></span
    >
    <span
      class="ml-1 inline-flex items-center space-x-0.5 rounded-md px-2.5 py-0.5 text-xs font-medium text-foreground ring-1 ring-inset ring-input/10"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="12"
        height="12"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="text-success"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path
          d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"
        /></svg
      ><span>Success</span></span
    >
    <span
      class="ml-1 inline-flex items-center space-x-0.5 rounded-md px-2.5 py-0.5 text-xs font-medium text-foreground ring-1 ring-inset ring-input/10"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="12"
        height="12"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="text-warning"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path
          d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"
        /></svg
      ><span>Warning</span></span
    >
    <span
      class="ml-1 inline-flex items-center space-x-0.5 rounded-md px-2.5 py-0.5 text-xs font-medium text-foreground ring-1 ring-inset ring-input/10"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="12"
        height="12"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="text-danger"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path
          d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"
        /></svg
      ><span>Danger</span></span
    >
    <span
      class="ml-1 inline-flex items-center space-x-0.5 rounded-md px-2.5 py-0.5 text-xs font-medium text-foreground ring-1 ring-inset ring-input/10"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="12"
        height="12"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="text-info"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path
          d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"
        /></svg
      ><span>Info</span></span
    >
    <span
      class="ml-1 inline-flex items-center space-x-0.5 rounded-md px-2.5 py-0.5 text-xs font-medium text-foreground ring-1 ring-inset ring-input/10"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="12"
        height="12"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="text-accent"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path
          d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"
        /></svg
      ><span>Accent</span></span
    >
  </div>
</section>
#Flat Badges

#Bordered Badges

#Bordered with dots badges

#Bordered with icon

#Notification

#Notification with pulse
