JSFiddle - React, Tailwind, and code Playground

by Rajesh Sitaraman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="wp-gsflinks-container" id="GSFLinksContainer">
  <div class="wp-gsflinks-item">
    <a href="#">
      <i class="fa fa-briefcase fa-5x"></i> Link
    </a>
  </div>
  <div class="wp-gsflinks-item">
  <a href="#">
    <i class="fa fa-picture-o fa-5x"></i> Link
    </a>
  </div>
  <div class="wp-gsflinks-item">
  <a href="#">
  <i class="fa fa-line-chart fa-5x"></i> Link </a>
  </div>
  <div class="wp-gsflinks-item">
  <a href="#">
  <i class="fa fa-file-text fa-5x"></i> Link </a>
  </div>
  <div class="wp-gsflinks-item">
  <a href="#">
  <i class="fa fa-download fa-5x"></i> Link </a>
  </div>
  <div class="wp-gsflinks-item">
  <a href="#">
  <i class="fa fa-envelope fa-5x"></i> Link </a>
  </div>
  <div class="wp-gsflinks-item">
  <a href="#">
  <i class="fa fa-shopping-cart fa-5x"></i> Link </a>
  </div>
  <div class="wp-gsflinks-item">
  <a href="#">
  <i class="fa fa-cog fa-5x"></i> Link </a>
  </div>
</div>

CSS

.wp-gsflinks-container {
  display: table-row;
}

.wp-gsflinks-item {
  display: table-cell;
  padding-left: 50px;
  text-align: center;
}
.wp-gsflinks-item a{
  color: gray;
}
.wp-gsflinks-item a:hover {
  color: green;
}