JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.0/css/fabric.min.css">

<div class="ms-Fabric">

  <div id="icon-list">
    <ul id="main">
			<li class="ms-Grid-col ms-sm12 ms-md6 ms-lg4 ms-xl2">
					<i class="ms-Icon ms-Icon--12PointStar" aria-hidden="true">              </i>
					<span class="ms-font-m">12PointStar</span>
				</li>
				<li class="ms-Grid-col ms-sm12 ms-md6 ms-lg4 ms-xl2">
        <i class="ms-Icon ms-Icon--Add" aria-hidden="true"></i>
        <span class="ms-font-m">Add</span>
      </li>
			<li class="ms-Grid-col ms-sm12 ms-md6 ms-lg4 ms-xl2">
        <i class="ms-Icon ms-Icon--AlignLeft" aria-hidden="true"></i>
        <span class="ms-font-m">AlignLeft</span>
      </li>
			<li class="ms-Grid-col ms-sm12 ms-md6 ms-lg4 ms-xl2">
					<i class="ms-Icon ms-Icon--12PointStar" aria-hidden="true">              </i>
					<span class="ms-font-m">12PointStar</span>
				</li>
				<li class="ms-Grid-col ms-sm12 ms-md6 ms-lg4 ms-xl2">
        <i class="ms-Icon ms-Icon--Add" aria-hidden="true"></i>
        <span class="ms-font-m">Add</span>
      </li>
			<li class="ms-Grid-col ms-sm12 ms-md6 ms-lg4 ms-xl2">
        <i class="ms-Icon ms-Icon--AlignLeft" aria-hidden="true"></i>
        <span class="ms-font-m">AlignLeft</span>
      </li>
    </ul>
   </div>
</div>

CSS

.ms-Grid-col {
   box-sizing: border-box;
	 background-color: grey;
	 border: 1px solid #666;
	 color: white;
	 padding: 20px;
	 text-align: center;
 }
 .ms-Grid-col:hover {
	 background-color: #bada55;
	 color: black;
 }
 
 i.ms-Icon{
	 font-size: 46px;
   margin-bottom: 10px;
 }

ul {
  display: flex;
  flex-wrap: wrap;
}
li {
  display: flex;
  flex-direction: column;
  list-style-type: none;
}