<a
    href="#"
    class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
  >
    Default
  </a>
  <a
    href="#"
    class="tag bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
  >
    Primary
  </a>
  <a
    href="#"
    class="tag bg-secondary text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
  >
    Secondary
  </a>
  <a
    href="#"
    class="tag bg-info text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
  >
    Info
  </a>
  <a
    href="#"
    class="tag bg-success text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
  >
    Success
  </a>
  <a
    href="#"
    class="tag bg-warning text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
  >
    Warning
  </a>
  <a
    href="#"
    class="tag bg-error text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
  >
    Error
  </a>
  <a
    href="#"
    class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80"
  >
    Light
  </a>

              

                
  <a
    href="#"
    class="tag rounded-full bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
  >
    Default
  </a>
  <a
    href="#"
    class="tag rounded-full bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
  >
    Primary
  </a>
  <a
    href="#"
    class="tag rounded-full bg-secondary text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
  >
    Secondary
  </a>
  <a
    href="#"
    class="tag rounded-full bg-info text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
  >
    Info
  </a>
  <a
    href="#"
    class="tag rounded-full bg-success text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
  >
    Success
  </a>
  <a
    href="#"
    class="tag rounded-full bg-warning text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
  >
    Warning
  </a>
  <a
    href="#"
    class="tag rounded-full bg-error text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
  >
    Error
  </a>
  <a
    href="#"
    class="tag rounded-full bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80"
  >
    Light
  </a>

              

                
  <a
    href="#"
    class="tag rounded-full border border-primary/30 bg-primary/10 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:border-accent-light/30 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25"
  >
    Primary
  </a>

  <a
    href="#"
    class="tag rounded-full border border-secondary/30 bg-secondary/10 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:border-secondary-light/30 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25"
  >
    Secondary
  </a>

  <a
    href="#"
    class="tag rounded-full border border-info/30 bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
  >
    Info
  </a>

  <a
    href="#"
    class="tag rounded-full border border-success/30 bg-success/10 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
  >
    Success
  </a>

  <a
    href="#"
    class="tag rounded-full border border-warning/30 bg-warning/10 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
  >
    Warning
  </a>

  <a
    href="#"
    class="tag rounded-full border border-error/30 bg-error/10 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
  >
    Error
  </a>

              

                
  <div class="flex flex-wrap">
    <div class="flex -space-x-px">
      <a
        href="#"
        class="tag rounded-l-none bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      >
        Primary
      </a>
      <a
        href="#"
        class="tag rounded-r-none bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
      >
        55
      </a>
    </div>

    <div class="flex -space-x-px">
      <a
        href="#"
        class="tag rounded-l-none bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
      >
        Message
      </a>
      <a
        href="#"
        class="tag rounded-r-none bg-info text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
      >
        65
      </a>
    </div>

    <div class="flex -space-x-px">
      <a
        href="#"
        class="tag rounded-full rounded-l-none border border-warning text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
      >
        Warnings
      </a>
      <a
        href="#"
        class="tag rounded-full rounded-r-none border border-warning bg-warning/10 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
      >
        35
      </a>
    </div>

    <div class="flex -space-x-px">
      <a
        href="#"
        class="tag rounded-l-none bg-success/10 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
      >
        Message
      </a>
      <a
        href="#"
        class="badge bg-success text-white shadow-lg shadow-success/50"
      >
        14
      </a>
    </div>

    <div class="flex -space-x-px">
      <a
        href="#"
        class="tag rounded-l-none bg-slate-150 px-4 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      >
        Star
      </a>
      <a
        href="#"
        class="tag rounded-r-none bg-secondary text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
          />
        </svg>
      </a>
    </div>

    <div class="flex -space-x-px">
      <div class="badge rounded-l-none border border-error text-error">
        Remove
      </div>
      <a
        href="#"
        class="tag rounded-r-none bg-error text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </a>
    </div>

    <div
      class="badge  space-x-2 rounded-full bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
    >
      <i
        class="fa-solid fa-person-biking text-sm text-slate-600 dark:text-navy-200"
      ></i>
      <span>Default</span>
      <button
        class="btn size-4.5 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30 dark:bg-white/20 dark:hover:bg-white/30 dark:focus:bg-white/30"
      >
        <i class="fa-solid fa-xmark dark:text-navy-50"></i>
      </button>
    </div>
  </div>