JSFiddle - React, Tailwind, and code Playground

HTML

<div id="homeServicesWrapper">

  <div class="serviceInfoWrapper">

    <div class="serviceImageWrapper">

      <img src="images/contract.png">

    </div>

    <p class="biggerP"><b>MOT Servicing</b></p>

    <p>We are an approved MOT testing station. All cars over 3 years old require a valid MOT certificate by law. We have the latest equipment and training to ensure your vehicle is tested properly. </p>

    <a class="defaultButton" href="#">Learn More</a>

  </div>

  <div class="serviceInfoWrapper pushLeft60">

    <div class="serviceImageWrapper">

      <img src="images/motIcon.png">

    </div>

    <p class="biggerP"><b>Diagnostics & Repair</b></p>

    <p>We can carry out all types of repairs some of which include brakes, auto-eletrical cam belts, clutches, head gaskets, turbos, water pumps, radiators, air conditioning. The list is endless...</p>

    <a class="defaultButton" href="#">Learn More</a>

  </div>

  <div class="serviceInfoWrapper pushLeft60">

    <div class="serviceImageWrapper">

      <img src="images/settings.png">

    </div>

    <p class="biggerP"><b>Specialist Services</b></p>

    <p>We have up-to-date repair and service information enabling us to save you money and have your car repaired correctly and safely.</p>

    <a class="defaultButton" href="#">Learn More</a>

  </div>

</div>

CSS

#content {
  width: auto;
  height: auto;
  background-color: white;
  padding: 12px;
  border-radius: 8px;
}

.pushLeft6 {
  margin-left: 6px;
}

.headerButtonStyle {
  color: black;
  margin-left: 0px;
  padding: 10px;
  display: inline-block;
  margin-top: 7px;
  margin-bottom: 7px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  transition: all 0.5s ease 0s;
  background: #f7f7f7;
  background-image: -webkit-linear-gradient(top, #f7f7f7, #ededed);
  background-image: -moz-linear-gradient(top, #f7f7f7, #ededed);
  background-image: -ms-linear-gradient(top, #f7f7f7, #ededed);
  background-image: -o-linear-gradient(top, #f7f7f7, #ededed);
  background-image: linear-gradient(to bottom, #f7f7f7, #ededed);
}

.headerButtonStyle:hover {
  transition: all 0.5s ease 0s;
  box-shadow: inset 0 0 0 3px black;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}

.defaultButton {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  font-family: Arial;
  color: #ffffff;
  font-size: 16px;
  padding: 8px 16px 8px 16px;
  text-decoration: none;
  transition: all 0.5s ease 0s;
  display: inline-block;
}

.defaultButton:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
  transition: all 0.5s ease 0s;
}

.title {
  margin:...