<div class="flex flex-wrap gap-2">
   <div class="indicator mt-2">
      <span class="offline-status"></span>
      <div class="grid bg-gray-light text-title w-28 h-28 place-content-center p-2"> Content Box </div>
   </div> 
</div>

  <div class="flex flex-wrap gap-2">
   <div class="indicator mt-2">
      <span class="active-status"></span>
      <div class="grid bg-gray-light text-title w-28 h-28 place-content-center rounded-full"> Avatar </div>
   </div> 
</div>

  <div class="flex flex-wrap gap-2">
   <div class="indicator mt-2">
      <span class="indicator-item badge bg-secondary text-white rounded-full top-[-15px] right-[-34px] !py-1 !px-2"> Update </span>
      <div class="grid bg-gray-light text-title w-28 h-20 place-content-center p-2"> Latest Version </div>
  </div> 
</div>

  <div class="flex flex-wrap gap-2">
   <div class="indicator mt-2">
      <span class="indicator-item active-process"> Typing.. </span>
      <div class="w-12 rounded">
          <img class="rounded-full" src="../../image.jpg" alt="avatar"/>
      </div>
   </div> 
</div>

  <div class="flex flex-wrap gap-2">
   <div class="indicator mt-2">
      <span class="indicator-item badge bg-white border-2 !border-gray-light shadow-lg text-title rounded-full top-[-15px] right-[-20px] !py-1 !px-2"> +99 </span>
      <button class="btn btn-info text-white"> Notification </button>
   </div> 
</div>

  <div class="flex flex-wrap gap-2">
   <div class="indicator">
      <button class="btn btn-success text-white flex justify-center items-center gap-1"> Dexo 
          +SVG_ICON("Arrow-Right-2","h-5 w-5 stroke-white")
      </button>
   </div> 
</div>

  <div class="flex flex-wrap gap-2">
   <div class="indicator mt-2">
      <span class="indicator-item badge bg-secondary text-white rounded-full top-[115px] right[-34px] !py-1 !px-2"> Required </span>
      <input type="email" placeholder="Enter your id.." class="bg-gray-light rounded-5 w-full py-[11px] pl-[25px] pr-[55px] text-xs font-semibold text-title">
   </div> 
</div>

  <div class="flex flex-wrap gap-2">
   <div class="mb-1 flex">
      <button class="tab tab-bordered tabs-bordered-bg data-tabFilter="1" tab-link"> Title </button>
      <button class="indicator mt-2 tab tab-bordered tabs-bordered-bg tab-active data-tabFilter="2" tab-link"> Description </button>
          <span class="indicator-item badge bg-primary text-white rounded-full top-[-20px] right-[-20px] !p-1"> +10 </span>
      <button class="tab tab-bordered tabs-bordered-bg data-tabFilter="3" tab-link"> Others </button>
  </div> 
</div>

<div class="flex flex-wrap gap-2">
   <div class="indicator">
      <span class="btn bg-secondary text-white rounded flex justify-center items-center gap-2"> Add Wishlist </span>
      <i data-feather="heart" class="stroke-white sm:h-[18px] sm:w-[18px] fill-white">
   </div> 
</div>

  <div class="flex flex-wrap gap-2">
   <div class="indicator mb-2">
      <span class="indicator-item badge bg-primary font-bold text-white !rounded-card bottom-[-10px] right-[-34px] !py-1 !px-2 border-none"> Dexo </span>
         <div class="card bg-gray-light">
            <div class="card-body text-title">
               <h3 class="text-lg font-bold"> Ready for job? </h3>
               <p class="font-normal"> Here, you can find more and more </p>
            </div>
         </div>    
   </div> 
</div>

  <div class="flex flex-wrap gap-2">
   <div class="indicator">
      <span class="indicator-item img-indicator badge bg-info text-white !py-1 !px-2 border-none"> Uploading..!! </span>
      <div class="avatar rounded w-64 h-[5.5rem]">
         <img class="rounded-full" src="../../image.jpg" alt="avatar"/>
      </div>
   </div> 
</div>