JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div class="container-fluid">
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-2 col-md-2 mb-2">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Stop</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">8</div>
</div>
<div class="col-auto">
<span class="material-icons">
pan_tool
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-2 col-md-2 mb-2">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Stop</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">8</div>
</div>
<div class="col-auto">
<span class="material-icons">
pan_tool
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-2 col-md-2 mb-2">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Stop</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">8</div>
</div>
<div class="col-auto">
<span class="material-icons">
pan_tool
...