JSFiddle - React, Tailwind, and code Playground

HTML

<a><i>X</i></a>
<a><i>Y</i></a>
<a><i>Z</i></a>

CSS

a i {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
 
	width: 5rem;
	height: 5rem;
  line-height: 5rem;

	background: #fff;
	color: #000;
	border: 1px solid #565656;
	border-radius: 10px;

	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

a:hover i {
	background: #ffd500;
	color: #fff;
	border-color: #ffd500;
}