<div class="space-y-4">
    <div class="flex space-x-reverse -space-x-px">
      <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"
      >
        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-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"
      >
        5
      </button>
    </div>

    <div class="flex space-x-reverse -space-x-px">
      <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"
      >
        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-r-none rounded-l-full bg-secondary font-medium text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
      >
        Third
      </button>
    </div>
  </div>
                
              

                
  <div class="space-y-4">
    <div class="flex space-x-reverse -space-x-px">
      <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"
      >
        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-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"
      >
        5
      </button>
    </div>
    <div class="flex space-x-reverse -space-x-px">
      <button
        class="btn rounded-r-full rounded-l-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-r-none rounded-l-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>
                
              

                
  <div class="space-y-4">
    <div class="flex space-x-reverse -space-x-px">
      <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"
      >
        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-r-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-reverse -space-x-px">
      <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"
      >
        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-r-none rounded-l-full bg-error/10 font-medium text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
      >
        Third
      </button>
    </div>
  </div>