JSFiddle - React, Tailwind, and code Playground

by James Connolly

HTML

<div class="link-grid">
	<li>List
  <a href="https://signaturepayments.com/high-risk-merchants-adult/">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="60" height="60" id="fi_2290456"><g id="outline"><path d="M19.73,395.212a33.977,33.977,0,0,0,26.461,33.259l1.362.313a614.9,614.9,0,0,0,138.293,15.752q15.354,0,30.721-.767l75.562-3.779a8,8,0,0,0,7.029-5.019l16.416-41.041A347.9,347.9,0,0,1,395.73,274.265V432a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V295.569a106,106,0,0,1,15.1-54.523l9.5-15.835a81.962,81.962,0,0,0,1.052-82.439L442.254,84.3a35.046,35.046,0,0,0-61.235-4.259L258.327,270.087c-.041.063-.081.128-.121.192A120.5,120.5,0,0,1,155.73,328a8.01,8.01,0,0,0-2.386.364L43.681,362.634A33.984,33.984,0,0,0,19.73,395.212ZM427.73,424h-16V408h16ZM222.389,326.519A136.1,136.1,0,0,0,271.83,278.67L394.461,88.716A18.988,18.988,0,0,1,418.712,81.9l-43.177,59.785A679.475,679.475,0,0,0,293.144,293.15l-13.321,34.261a47.963,47.963,0,0,1-64.2,26.448L185.8,340.609A135.933,135.933,0,0,0,222.389,326.519Zm-67.151,18.016,53.879,23.944a63.968,63.968,0,0,0,85.619-35.27l13.32-34.26a663.479,663.479,0,0,1,80.449-147.9L429.35,94.5l25.66,55.308q.143.308.311.6a65.944,65.944,0,0,1-.708,66.571l-9.5,15.834a122.015,122.015,0,0,0-17.382,62.756V392h-16V256a8,8,0,0,0-13.268-6.021,363.715,363.715,0,0,0-97.743,138.009l-14.512,36.279-70.438,3.521a598.783,598.783,0,0,1-164.623-14.6l-1.361-.313a18.132,18.132,0,0,1-1.331-34.975Z"></path><path d="M427.2,211.013a8,8,0,0,0,11.2-1.6,46.141,46.141,0,0,0,2.663-51.622,8,8,0,0,0-13.72,8.232,30.2,30.2,0,0,1-1.743,33.79A8,8,0,0,0,427.2,211.013Z"></path><path d="M89.2,399.59l1.7.567A152.508,152.508,0,0,0,139.23,408h32.5a8,8,0,1,0,0-16h-32.5a136.558,136.558,0,0,1-43.266-7.021l-1.706-.569A8,8,0,0,0,89.2,399.59Z"></path><path...

CSS

.link-grid {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  grid-gap: 15px;
}

.link-grid a {
  display: flex;
  flex-flow: column;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
  padding: 20px 0 0;
  background: #F5F5F5;
  color: #473B84;
  text-decoration: none;
  font-family: poppins, arial, sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 3px;
  position: relative;
  transition: all 0.3s;
}

.link-grid a svg {
  height: 60px;
  width: auto;
  fill: #473B84;
  transition: fill 0.3s;
}

.link-grid a:before {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #fff);
  opacity: 0.3;
  position:absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) skew(-45deg);
  mix-blend-mode: overlay;
  opacity: 0.4;
}

.link-grid span {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 10px 5px;
  text-align: center;
  position: relative;
}

.link-grid a:hover {
  color: red;
}

.link-grid a:hover svg {
  fill: red;
}