<div class="flex -space-x-px">
    <button
      class="btn rounded-r-none bg-primary font-medium 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"
    >
      1
    </button>
    <button
      class="btn rounded-none bg-primary font-medium 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"
    >
      2
    </button>
    <button
      class="btn rounded-none bg-primary-focus font-medium text-white active:bg-primary-focus/90 dark:bg-accent-focus dark:active:bg-accent/90"
    >
      3
    </button>
    <button
      class="btn rounded-none bg-primary font-medium 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"
    >
      4
    </button>
    <button
      class="btn rounded-l-none bg-primary font-medium 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"
    >
      5
    </button>
  </div>

  <div class="flex -space-x-px">
    <button
      class="btn rounded-r-none rounded-l-full bg-secondary font-medium text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
    >
      First
    </button>
    <button
      class="btn rounded-none bg-secondary-focus font-medium text-white active:bg-secondary-focus/90"
    >
      Second
    </button>
    <button
      class="btn rounded-l-none rounded-r-full bg-secondary font-medium text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
    >
      Third
    </button>
  </div>
                
          

            
<div class="flex -space-x-px">
    <button
      class="btn rounded-r-none border border-info font-medium text-info hover:bg-info hover:text-white focus:bg-info focus:text-white active:bg-info/90"
    >
      1
    </button>
    <button
      class="btn rounded-none border border-info font-medium text-info hover:bg-info hover:text-white focus:bg-info focus:text-white active:bg-info/90"
    >
      2
    </button>
    <button
      class="btn rounded-none bg-info font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
    >
      3
    </button>
    <button
      class="btn rounded-none border border-info font-medium text-info hover:bg-info hover:text-white focus:bg-info focus:text-white active:bg-info/90"
    >
      4
    </button>
    <button
      class="btn rounded-l-none border border-info font-medium text-info hover:bg-info hover:text-white focus:bg-info focus:text-white active:bg-info/90"
    >
      5
    </button>
  </div>
  <div class="flex -space-x-px">
    <button
      class="btn rounded-l-full rounded-r-none border border-warning font-medium text-warning hover:bg-warning hover:text-white focus:bg-warning focus:text-white active:bg-warning/90"
    >
      First
    </button>
    <button
      class="btn rounded-none bg-warning font-medium text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
    >
      Second
    </button>
    <button
      class="btn rounded-l-none rounded-r-full border border-warning font-medium text-warning hover:bg-warning hover:text-white focus:bg-warning focus:text-white active:bg-warning/90"
    >
      Third
    </button>
  </div>

            
          

            
<div class="flex -space-x-px">
    <button
      class="btn rounded-r-none bg-success/10 font-medium text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
    >
      1
    </button>
    <button
      class="btn rounded-none bg-success/10 font-medium text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
    >
      2
    </button>
    <button
      class="btn rounded-none bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
    >
      3
    </button>
    <button
      class="btn rounded-none bg-success/10 font-medium text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
    >
      4
    </button>
    <button
      class="btn rounded-l-none bg-success/10 font-medium text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
    >
      5
    </button>
  </div>
  <div class="flex -space-x-px">
    <button
      class="btn rounded-r-none rounded-l-full bg-error/10 font-medium text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
    >
      First
    </button>
    <button
      class="btn rounded-none bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
    >
      Second
    </button>
    <button
      class="btn rounded-l-none rounded-r-full bg-error/10 font-medium text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
    >
      Third
    </button>
  </div>