<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="p-3">
<div class="row gx-3">
<div class="col-xxl-3 col-sm-6 col-12">
<div class="stats-tile d-flex align-items-center position-relative tile-red">
<div class="sale-icon icon-box xl rounded-5 me-3">
<i class="bi bi-pie-chart font-2x text-red"></i>
</div>
<div class="sale-details">
<h5 class="text-muted">Products</h5>
<h3>296</h3>
</div>
<div class="tile-count d-flex align-items-center justify-content-center flex-column fw-bold red">
<i class="bi bi-arrow-up-circle-fill font-1x"></i>
<span>3%</span>
</div>
</div>
</div>
<div class="col-xxl-3 col-sm-6 col-12">
<div class="stats-tile d-flex align-items-center position-relative tile-blue">
<div class="sale-icon icon-box xl rounded-5 me-3">
<i class="bi bi-sticky font-2x text-blue"></i>
</div>
<div class="sale-details">
<h5 class="text-muted">Orders</h5>
<h3>368</h3>
</div>
<div class="tile-count d-flex align-items-center justify-content-center flex-column fw-bold blue">
<i class="bi bi-arrow-up-circle-fill font-1x"></i>
<span>5%</span>
</div>
</div>
</div>