<div class="flex gap-4 lg:gap-6 flex-wrap">
  <div class="relative">
    <span class="absolute -top-0.5 -right-1.5 text-xs rounded-full size-5 bg-primary-300 text-neutral-0 f-center font-bold">5</span>
    <i class="las la-bell text-4xl"></i>
  </div>
  <div class="relative">
    <span class="absolute -top-0.5 -right-1.5 text-xs rounded-full size-5 bg-secondary-300 text-neutral-0 f-center font-bold">5</span>
    <i class="las la-bell text-4xl"></i>
  </div>
  <div class="relative">
    <span class="absolute -top-0.5 -right-1.5 text-xs rounded-full size-5 bg-info-300 text-neutral-0 f-center font-bold">5</span>
    <i class="las la-bell text-4xl"></i>
  </div>
  <div class="relative">
    <span class="absolute -top-0.5 -right-1.5 text-xs rounded-full size-5 bg-success-300 text-neutral-0 f-center font-bold">5</span>
    <i class="las la-bell text-4xl"></i>
  </div>
  <div class="relative">
    <span class="absolute -top-0.5 -right-1.5 text-xs rounded-full size-5 bg-info-300 text-neutral-0 f-center font-bold">5</span>
    <i class="las la-bell text-4xl"></i>
  </div>
  <div class="relative">
    <span class="absolute -top-0.5 -right-1.5 text-xs rounded-full size-5 bg-error-300 text-neutral-0 f-center font-bold">5</span>
    <i class="las la-bell text-4xl"></i>
  </div>
  <div class="relative">
    <span class="absolute -top-0.5 -right-1.5 text-xs rounded-full size-5 bg-neutral-900 text-neutral-0 f-center font-bold">5</span>
    <i class="las la-bell text-4xl"></i>
  </div>
</div>
                  

<div class="flex gap-4 lg:gap-6 flex-wrap items-center">
  <div class="relative">
    <span class="absolute top-0 -right-1.5 rounded-full size-2 bg-primary-300"></span>
    <i class="las la-bell text-4xl"></i>
  </div>

  <div class="relative size-10 f-center border-2 border-primary-75 bg-primary-50">
    <span class="absolute -top-1 -right-1 rounded-full size-2.5 bg-primary-300 border-2 border-neutral-20 dark:border-neutral-903"></span>
    <i class="las la-bell text-2xl"></i>
  </div>

  <div class="relative rounded size-10 f-center border-2 border-primary-75 bg-primary-50">
    <span class="absolute -top-1 -right-1 rounded-full size-2.5 bg-primary-300 border-2 border-neutral-20 dark:border-neutral-903"></span>
    <i class="las la-bell text-2xl"></i>
  </div>

  <div class="relative rounded-lg size-10 f-center border-2 border-primary-75 bg-primary-50">
    <span class="absolute -top-1 -right-1 rounded-full size-2.5 bg-primary-300 border-2 border-neutral-20 dark:border-neutral-903"></span>
    <i class="las la-bell text-2xl"></i>
  </div>

  <div class="relative rounded-xl size-10 f-center border-2 border-primary-75 bg-primary-50">
    <span class="absolute -top-0.5 -right-0.5 rounded-full size-2.5 bg-primary-300 border-2 border-neutral-20 dark:border-neutral-903"></span>
    <i class="las la-bell text-2xl"></i>
  </div>

  <div class="relative rounded-2xl size-10 f-center border-2 border-primary-75 bg-primary-50">
    <span class="absolute -top-0.5 -right-0.5 rounded-full size-2.5 bg-primary-300 border-2 border-neutral-20 dark:border-neutral-903"></span>
    <i class="las la-bell text-2xl"></i>
  </div>

  <div class="relative rounded-[20px] size-10 f-center border-2 border-primary-75 bg-primary-50">
    <span class="absolute top-0 right-0 rounded-full size-2.5 bg-primary-300 border-2 border-neutral-20 dark:border-neutral-903"></span>
    <i class="las la-bell text-2xl"></i>
  </div>

  <div class="relative rounded-[20px] flex items-center">
    <span class="absolute -top-1 -right-1 rounded-full size-2.5 bg-primary-300 border-2 border-neutral-20 dark:border-neutral-903"></span>
    <span class="l-text">Typography</span>
  </div>
</div>
                  

<div class="flex gap-4 lg:gap-6 flex-wrap items-center">
  <div class="relative size-10 rounded-full bg-neutral-50 dark:bg-neutral-400">
    <span class="absolute bottom-0 f-center size-4 right-0 text-neutral-0 bg-secondary-300 rounded-full border border-neutral-0 dark:border-neutral-903">
      <i class="las la-clock text-xs"></i>
    </span>
  </div>
  <div class="relative size-10 rounded-full bg-neutral-50 dark:bg-neutral-400">
    <span class="absolute bottom-0 f-center size-4 right-0 text-neutral-0 bg-info-300 rounded-full border border-neutral-0 dark:border-neutral-903">
      <i class="las la-plus text-xs"></i>
    </span>
  </div>
  <div class="relative size-10 rounded-full bg-neutral-50 dark:bg-neutral-400">
    <span class="absolute bottom-0 f-center size-4 right-0 text-neutral-0 bg-error-300 rounded-full border border-neutral-0 dark:border-neutral-903">
      <i class="las la-minus text-xs"></i>
    </span>
  </div>

  <div class="relative size-10 rounded-full bg-neutral-50 dark:bg-neutral-400">
    <span class="absolute bottom-0 f-center size-4 right-0 text-neutral-0 bg-info-300 rounded-full border-2 border-neutral-0 dark:border-neutral-903"> </span>
  </div>

  <div class="relative size-10 rounded-full bg-neutral-50 dark:bg-neutral-400">
    <span class="absolute bottom-0 f-center size-4 right-0 text-neutral-0 bg-success-300 rounded-full border-[0.5px] border-neutral-0 dark:border-neutral-903"> </span>
  </div>
</div>
                  

<div class="flex gap-5 lg:gap-8 flex-wrap">
  <div class="relative">
    <span class="absolute -top-1 -right-1.5 text-xs rounded-full size-5 bg-error-300 text-neutral-0 f-center font-bold">9</span>
    <i class="las la-bell text-4xl"></i>
  </div>
  <div class="relative">
    <span class="absolute -top-1 -right-2 text-xs rounded-full h-5 min-w-max px-1.5 bg-error-300 text-neutral-0 f-center font-bold">99</span>
    <i class="las la-bell text-4xl"></i>
  </div>
  <div class="relative">
    <span class="absolute -top-1 -right-3 text-xs rounded-full h-5 min-w-max px-1.5 bg-error-300 text-neutral-0 f-center font-bold">999</span>
    <i class="las la-bell text-4xl"></i>
  </div>
  <div class="relative">
    <span class="absolute -top-1 -right-5 text-xs rounded-full h-5 min-w-max px-1.5 bg-error-300 text-neutral-0 f-center font-bold">9999</span>
    <i class="las la-bell text-4xl"></i>
  </div>
  <div class="relative">
    <span class="absolute -top-1 -right-7 text-xs rounded-full h-5 min-w-max px-1.5 bg-error-300 text-neutral-0 f-center font-bold">99999</span>
    <i class="las la-bell text-4xl"></i>
  </div>
  <div class="relative">
    <span class="absolute -top-1 -right-3 text-xs rounded-full h-5 min-w-max px-1.5 bg-error-300 text-neutral-0 f-center font-bold">99+</span>
    <i class="las la-bell text-4xl"></i>
  </div>
  <div class="relative">
    <span class="absolute -top-1 -right-5 text-xs rounded-full h-5 min-w-max px-1.5 bg-error-300 text-neutral-0 f-center font-bold">999+</span>
    <i class="las la-bell text-4xl"></i>
  </div>
</div>
                  

<div class="flex gap-5 lg:gap-8 flex-wrap">
  <div class="relative bg-info-300 size-10">
    <span class="absolute -top-1 -right-1 text-xs rounded-full size-3 bg-neutral-900 border-2 border-neutral-0 dark:border-neutral-903"></span>
  </div>
  <div class="relative bg-info-300 size-10 rounded">
    <span class="absolute -top-1 -right-1 text-xs rounded-full size-3 bg-neutral-900 border-2 border-neutral-0 dark:border-neutral-903"></span>
  </div>
  <div class="relative bg-info-300 size-10 rounded-lg">
    <span class="absolute -top-1 -right-1 text-xs rounded-full size-3 bg-neutral-900 border-2 border-neutral-0 dark:border-neutral-903"></span>
  </div>
  <div class="relative bg-info-300 size-10 rounded-xl">
    <span class="absolute -top-1 -right-1 text-xs rounded-full size-3 bg-neutral-900 border-2 border-neutral-0 dark:border-neutral-903"></span>
  </div>
  <div class="relative bg-info-300 size-10 rounded-2xl">
    <span class="absolute -top-0.5 -right-0.5 text-xs rounded-full size-3 bg-neutral-900 border-2 border-neutral-0 dark:border-neutral-903"></span>
  </div>
  <div class="relative bg-info-300 size-10 rounded-full">
    <span class="absolute top-0 right-0 text-xs rounded-full size-3 bg-neutral-900 border-2 border-neutral-0 dark:border-neutral-903"></span>
  </div>
</div>