JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 
     						<div class="container-fluid">
						
							<!-- dashboard  -->
							<div class="dashboard_box">
								<div class="row">
									<div class="col-lg-3 col-md-6 col-sm-12">
										<div class="portlet portlet-blue text-center radius">
											<div class="portlet-title">
												<h3 class="text-uppercase">TOTAL</h3>												
											</div>
											<div class="portlet-body">
												<h2>1</h2>
												<p>Budget : <span>$ 0</span></p>
												<p>Commission : <span>$ 0</span></p>
											</div>
										</div>
									</div>
									<div class="col-lg-3 col-md-6 col-sm-12">
										<div class="portlet portlet-pink text-center radius">
											<div class="portlet-title">
												<h3 class="text-uppercase">EXPIRED</h3>												
											</div>
											<div class="portlet-body">
												<h2>1</h2>
												<p>Budget : <span>$ 0</span></p>
												<p>Commission : <span>$ 0</span></p>
											</div>
										</div>
									</div>
									<div class="col-lg-3 col-md-6 col-sm-12">
										<div class="portlet portlet-yellow text-center radius">
											<div class="portlet-title">
												<h3 class="text-uppercase">UPCOMING</h3>												
											</div>
											<div class="portlet-body">
												<h2>0</h2>
												<p>Budget : <span>$ 0</span></p>
												<p>Commission : <span>$ 0</span></p>
											</div>
										</div>
									</div>
									<div class="col-lg-3 col-md-6 col-sm-12">
										<div class="portlet portlet-green text-center radius">
											<div...

CSS

.portlet-blue {background-color:#1476C6;}
.portlet-pink {background-color:#ed114c;}
.portlet-yellow {background-color:#fbbf16;}
.portlet-green {background-color:#47ae33;} 
.portlet {margin-bottom:60px;}
.portlet .portlet-title h3 {background-color:rgba(0, 0, 0, 0.2); color:#ffffff; border-top-left-radius:4px; border-top-right-radius:4px; font-size:24px; padding:8px 0;}
.portlet-body {padding:15px 0;}
.portlet .portlet-body h2 {font-size:80px; color:#000000; font-weight:bold; line-height:80px; margin-bottom:15px;}
.portlet-body p {margin:0; color:#ffffff; font-size:20px;}
.portlet-body p span {color:#000000;}