JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<div class="product-features row">

  <div class="column">
    <div class="card">
      <p>Wate-Free</p>
      <i class="fas fa-check-circle"></i>
    </div>
  </div>


  <div class="column">
    <div class="card">
      <p>Wate-Free</p>
      <i class="fas fa-check-circle"></i>
    </div>
  </div>
	
	  <div class="column">
    <div class="card">
      <p>Wate-Free</p>
      <i class="fas fa-check-circle"></i>
    </div>
  </div>
</div>

CSS

.product-features {
  font-family: Arial, Helvetica, sans-serif;
	display: block;

}

/* Float four columns side by side */
.column {
  float: left;
  width: 20%;
  padding: 0 10px;
  margin-bottom: 30px;
	box-sizing: border-box;
}

/* Remove extra left and right margins, due to padding */
.row {
  margin: 0 -5px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 25%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  text-align: center;
}

.product-features p {
  margin: 0 0 10px;
}

.product-features .fa-check-circle {
    font-size: 20px;
}