<div class="simple-counter">
  <div class="simple">
  <div>
    <span>$</span>
      <p class="counter" data-count="150">0</p>
    </div>
    <p><i class="ti ti-arrow-narrow-up text-success"></i>درآمد</p>
  </div>
  <div class="simple">
    <div class="counter" data-count="85">0</div>
    <p><i class="ti ti-arrow-narrow-down text-danger"></i>پروژه‌ها</p>
  </div>
  <div class="simple">
     <div>
      <p class="counter" data-count="60">0</p>
      <span>%</span>
    </div>
    <p><i class="ti ti-arrow-narrow-up text-success"></i>دستاورد</p>
  </div>
 </div>

  
  <div class="customized-counter mt-4">
  <div class="customized">
    <i class="ti ti-apps"></i>
    <div class="d-flex align-items-center">
    <span>$</span>
    <p class="counter f-w-500 f-s-30 text-dark" data-count="500">0</p>
  </div>
    <p>Respected Companies</p>
  </div>
  <div class="customized">
    <i class="ti ti-report-analytics"></i>
    <div class="counter" data-count="75">0</div>
    <p>Analytical Reports</p>
  </div>
  <div class="customized">
    <i class="ti ti-brand-paypal"></i>
    <div class="d-flex align-items-center">
    <p class="counter f-w-500 f-s-30 text-dark" data-count="40">0</p>
    <span>%</span>
  </div>
    <p>Protected Payments</p>
  </div>
 </div>

                  
  <div class="simple-counter">
  <div class="simple">
      <div>
    <span>$</span>
      <p class="counter" data-count="150">0</p>
    </div>
    <p><i class="ti ti-arrow-narrow-up text-success"></i>درآمد</p>
  </div>
  <div class="simple">
    <div class="counter" data-count="85">0</div>
    <p><i class="ti ti-arrow-narrow-down text-danger"></i>پروژه‌ها</p>
  </div>
  <div class="simple">
     <div>
      <p class="counter" data-count="60">0</p>
      <span>%</span>
    </div>
    <p><i class="ti ti-arrow-narrow-up text-success"></i>دستاورد</p>
  </div>
   <div>
     <button class="btn btn-light-primary" id="startCounter">به‌روزرسانی داده‌ها </button>
   </div>
 </div>

        
         <div class="simple-counter">
        <ul class="nav nav-tabs app-tabs-primary" id="Basic" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="one-tab" data-bs-toggle="tab"
              data-bs-target="#tab-one" type="button" role="tab" aria-controls="tab-one"
              aria-selected="true">Tab-1</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="two-tab" data-bs-toggle="tab" data-bs-target="#tab-two"
              type="button" role="tab" aria-controls="tab-two" aria-selected="false">Tab-2</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="three-tab" data-bs-toggle="tab" data-bs-target="#tab-three"
              type="button" role="tab" aria-controls="tab-three" aria-selected="false">Tab-3</button>
          </li>
        </ul>
        <div class="tab-content" id="BasicContent">
          <div class="tab-pane fade show active" id="tab-one" role="tabpanel"
            aria-labelledby="one-tab" tabindex="0">
            ...
          </div>
          <div class="tab-pane fade" id="tab-two" role="tabpanel" aria-labelledby="two-tab"
            tabindex="0">
             ...
          </div>
          <div class="tab-pane fade" id="tab-three" role="tabpanel" aria-labelledby="three-tab"
            tabindex="0">
             ...
          </div>
        </div>