JSFiddle - React, Tailwind, and code Playground

by senthilkumar_snp

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css">
<div class="row">
  <div class="col-sm-12 col-md-3 col-lg-4">
    <div class="card" id="card1">
      <div class="card-body stat-widget-one" id="card-body1">
        <div class="stat-icon dib"><i id="coss" class="ti-location-pin"></i></div>
      </div> 
    </div>
   </div>
   <div class="col-sm-12 col-md-3 col-lg-4">
    <div class="card" id="card1">
      <div class="card-body stat-widget-one" id="card-body1">
        <div class="stat-icon dib"><i id="coss" class="ti-user "></i></div>
      </div> 
    </div>
   </div>
   <div class="col-sm-12 col-md-3 col-lg-4">
    <div class="card" id="card1">
      <div class="card-body stat-widget-one" id="card-body1">
        <div class="stat-icon dib"><i id="coss" class="ti-pencil-alt "></i></div>
      </div> 
    </div>
   </div>
</div>

CSS

.card{
    color:black !important;
	
}
#card1{
	background: #051829;
	text-shadow: 2px 2px 4px #000000;
	 border: 0px solid;
  padding: 0px;
   box-shadow: 0 35px 20px #777;
}
.stat-text{
	color:#fff !important;
    padding-top:15px;
}

.stat-widget-one .stat-icon i {
    font-size: 30px;
    border-width: 3px;
    border-style: solid;
    border-radius: 100px;
    padding: 10px;
    font-weight: 900;
    display: inline-block;
}
.red-tooltip .tooltiptext {
  visibility: hidden;
  width: 127px;
  background-color: red;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
      margin-top: 100px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.red-tooltip:hover .tooltiptext {
  visibility: visible;
   }
    body {
    background: #f1f2f7;
   
    font-family: 'Open Sans' sans-serif !important;
    font-size: 16px;
    width: 100% !important;
   }

 .stat-widget-one .stat-icon {
    /* vertical-align: top; */
    /* margin-left: 11px; */
    /* margin-top: -5PX; */
}

#coss
{
	color:#3f51b5 !important;
}
#card-body1, #card-body2,#card-body3,#card-body4,
#card-body5,#card-body6,#card-body7,#card-body8,
#card-body9,#card-body10,#card-body11 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
   /* height: 91px !important; */
    background-color:white;
    text-align: center;
   }