<div class="card">
  <!-- BEGIN card-body -->
  <div class="card-body">
    <div class="mb-3 fw-semibold d-flex align-items-center">
      <div class="flex-fill">Total Orders</div>
      <div>
        <a href="#" data-bs-toggle="dropdown" class="text-body"><i class="bi bi-three-dots-vertical"></i></a>
        <div class="dropdown-menu dropdown-menu-end" data-bs-theme="light">
          <a href="#" class="dropdown-item">View full report</a>
          <a href="#" class="dropdown-item">Reload</a>
          <a href="#" class="dropdown-item">Export Data</a>
        </div>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-lg-12 position-relative">
        <h3 class="mb-0 d-flex">
          302
          <span class="text-body fs-10px badge bg-body my-5px d-flex align-items-center ms-2">
            <i class="fa fa-exclamation-circle fa-fw fa-lg me-1 text-warning"></i> 
            3 pending orders
          </span>
        </h3>
        <div class="fs-13px mt-2"><span class="badge bg-theme-subtle text-theme py-5px me-1">+12%</span> compare to last week</div>
        <i class="bi bi-box-seam display-6 lh-1 mt-n2 text-body text-opacity-20 me-3 position-absolute end-0 top-0"></i>
      </div>
    </div>
    <div class="mt-3 fs-11px">
      <div class="text-body text-opacity-50">last updated on</div>
      <div class="fw-600 text-body text-opacity-75">Feb 3, 4:09:57 AM UTC</div>
    </div>
  </div>
  <!-- END card-body -->
</div>