Customers Tiles

Contracts
Total
13+3
Active
4-1
Subscriptions
Total
26+3
Active
4-1
Agreements
Total
6+3
Active
4-1
Add a New View 
        
<div class="row col-custom-padding mt-3">
  <div class="col">
     <div class="customer-tiles detail-tiles">
        <h5>Contracts</h5>
        <div class="customer-total">
           <div class="customer-icon"><i class="icon-contract"><span class="path1"></span><span class="path2"></span></i></div>
           <div class="compare-col">
              <h6>Total </h6>
              <div class="customers-col"><span class="compare-total">13</span><span class="plusTxt text-green">+3</span><i class="icon-green-arrow"></i></div>
           </div>
           <div class="customer-icon ml-5"><i class="icon-active-year"><span class="path1"></span><span class="path2"></span></i></div>
           <div class="compare-col active-list">
              <h6>Active </h6>
              <div class="customers-col"><span class="compare-total">4</span><span class="minusTxt">-1</span><i class="icon-green-arrow"></i></div>
           </div>
        </div>
     </div>
  </div>
  <div class="col">
     <div class="customer-tiles detail-tiles">
        <h5>Subscriptions</h5>
        <div class="customer-total">
           <div class="customer-icon"><i class="icon-contract"><span class="path1"></span><span class="path2"></span></i></div>
           <div class="compare-col">
              <h6>Total </h6>
              <div class="customers-col"><span class="compare-total">26</span><span class="plusTxt text-green">+3</span><i class="icon-green-arrow"></i></div>
           </div>
           <div class="customer-icon ml-5"><i class="icon-active-year"><span class="path1"></span><span class="path2"></span></i></div>
           <div class="compare-col active-list">
              <h6>Active </h6>
              <div class="customers-col"><span class="compare-total">4</span><span class="minusTxt">-1</span><i class="icon-green-arrow"></i></div>
           </div>
        </div>
     </div>
  </div>
  <div class="col">
     <div class="customer-tiles detail-tiles">
        <h5>Agreements</h5>
        <div class="customer-total">
           <div class="customer-icon"><i class="icon-contract"><span class="path1"></span><span class="path2"></span></i></div>
           <div class="compare-col">
              <h6>Total </h6>
              <div class="customers-col"><span class="compare-total">6</span><span class="plusTxt text-green">+3</span><i class="icon-green-arrow"></i></div>
           </div>
           <div class="customer-icon ml-5"><i class="icon-active-year"><span class="path1"></span><span class="path2"></span></i></div>
           <div class="compare-col active-list">
              <h6>Active</h6>
              <div class="customers-col"><span class="compare-total">4</span><span class="minusTxt">-1</span><i class="icon-green-arrow"></i></div>
           </div>
        </div>
     </div>
  </div>
  <div class="col-md-2">
     <div class="customer-tiles add-new-customer">
        <div class="customer-total">
           <div class="customer-icon"><i class="icon-plus"></i></div>
           <div class="compare-col">
              <a href="javascript:void(0);">Add a New View</a>
           </div>
        </div>
     </div>
  </div>
</div>