JSFiddle - React, Tailwind, and code Playground

by Jordan Dayton

HTML

<div class="wrapper">

  <a href="ENTER_URL_HERE" target="_top">
    <div class="box hvr-grow">
      <span>
      <img style="vertical-align:middle; margin-top: -3px;" src="https://maxcdn.icons8.com/windows10/PNG/32/Messaging/filled_star-32.png" title="Star Filled" width="25"/>
    </span>
      <span>Six-Star Canvas Course</span>
    </div>
  </a>

  <a href="ENTER_URL_HERE" target="_top">
    <div class="box hvr-grow">
      <span>
      <img style="vertical-align:middle" src="https://maxcdn.icons8.com/iOS7/PNG/25/Cinema/kicking_filled-25.png" title="Kicking Filled" width="25"/>
    </span>
      <span>Kung Fu Canvas Course</span>
    </div>
  </a>

  <a href="ENTER_URL_HERE" target="_top">
    <div class="box hvr-grow">
      <span>
      <img style="vertical-align:middle" src="https://maxcdn.icons8.com/Android_L/PNG/32/Transport/pickup-32.png" title="Pickup" width="25"/>
    </span>
      <span>Canvas FastTrack Video Series</span>
    </div>
  </a>

</div>

CSS

.wrapper {
  color: #fff;
  font-weight: normal;
  text-align: left;
  padding: 20px 20px 20px 20px;
  height: auto;
  background-color: #58585B;
  border-radius: 5px;
}

.box {
  display: table;
  padding: 5px 5px 5px 5px;
}

span {
  font: 16px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  vertical-align: middle;
  display: table-cell;
  padding: 5px;
}

img {
  filter: invert(100) contrast(100)
}

a:link {
  color: #fff;
  text-decoration: none;
}

a:visited {
  color: #fff;
}

/* Grow */
.hvr-grow {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}